我在使用 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>