0

我在使用 iScroll 和实现它的 div 时遇到了一些问题。

除了一件事，一切都很好。

<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>

我有一个 jQuery 函数，可以根据您按下的按钮将 '.container' div 向左或向右 100% 移动。“上一个”或“下一个”。

现在问题出现在 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 回答