0

iScroll とそれを実装した div に問題があります。

1つのことを除いて、すべて正常に機能します。

<div class="previous"></div>
<div style="width: 100%; position: relative;" id="wrapper">
    <div class="container" style="width: 300%; position: absolute;">
        <div style="width: 33.3333%; float: left;">content block one</div>
        <div style="width: 33.3333%; float: left;">content block two</div>
        <div style="width: 33.3333%; float: left;">content block three</div>
    </div>
</div>
<div class="next"></div>

押したボタンに応じて「.container」divを左または右に100％移動するjQuery関数があります。「前」または「次」。

問題は、iScroll の変更に伴い発生します。「#wrapper」div の子 div に新しいスタイルを挿入して、指のスワイプで移動します。そのため、次と前をクリックしてもそれが選択されないため、最後の div にいるときでも、何も含まれていない div の「.next」領域にスワイプできます。

それが理にかなっていることを願っています。iScroll.js などを変更して、「.container」div の絶対位置を変更したいと思います。

前もって感謝します。

これは、ボタンで動きをアニメーション化する jQuery コードです。

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    $(".container").animate({"left": "-=200%"}, "slow");
} else {
    counter --;
    $(".container").animate({"left": "+=100%"}, "slow");
}
return counter;
});

//Next arrow function
$(".next").click(function(){

if (counter === 3){
    counter = 1;
    $(".container").animate({"left": "+=200%"}, "slow");
} else {
    counter ++;
    $(".container").animate({"left": "-=100%"}, "slow");
}
return counter;
});

</script>
4

1 に答える 1

0

わかった、

私は何をすべきかを理解しました。

私の関数では、iScroll 関数を追加しました。

<script type="text/javascript">
var counter = 1;
// Previous arrow function
$(".previous").click(function(){

if (counter === 1) {
    counter = 3;
    myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    } else {
        counter --;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

//Next arrow function
$(".next").click(function(){

    if (counter === 3){
        counter = 1;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500););
    } else {
        counter ++;
        myScroll.scrollToElement('div:nth-child(' + counter + ')', 500);
    }
        return counter;
    });

</script>
于 2012-05-10T06:38:02.093 に答える