iscroll无限轮播
2017-02-21 本文已影响338人
荞叶
iscroll无限轮播
无限轮播有两种实现方法，一种是遇到边界图片，滚动前先移动下一
张图片的DOM节点。然而这种方法，会更新DOM.实际效果如果图片滚动
动画过慢的话，有卡顿。
这里我介绍另一种方法，轮播图片的前面挺入第一张图片，最后一张后面插
入第一张图片。这样,假如轮播图片有3张，序号是1，2，3。那么增加两张
图片后的顺序是3，1，2，3，1。向右滚动到3，接着1，在动画停止后，1
跳转到1即可。同理，向左滚动3跳转到3.
这里介绍的轮播图，会更复杂一些。当前图片不是全屏的，居中显示，左右
显示部分的前后图片。如图。其实思想还是一样的。再插入两张图片即可。
Video_2017-02-21_142253.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>iScroll轮播</title>
<script src="zepto.js"></script>
<script src="iscroll-probe.js"></script>
<style>
*{
margin:0;
padding:0;
}
#carousel {
height: 68px;
position: relative;
width: 100%;
overflow: hidden;
outline: 0;
-webkit-box-sizing: border-box;
z-index: 1;
}
#carousel > div {
position: absolute;
width: 2065px;
}
#carousel a {
float: left;
display: block;
width: 295px;
padding:0 5px;
}
#carousel a img {
width: 100%;
display: block;
border-radius: 6px;
border: none;
}
</style>
</head>
<body>
<div id="carousel">
<div>
<div class="carousel-content" style="transform: translateX(40px);">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
</div>
<script>
var myScroll = new IScroll($("#carousel").get(0), {
mouseWheel: true,
scrollbars: false,
scrollX: true,
scrollY: false,
eventPassthrough: true,
preventDefault: false,
bounce: false,
//snap:true
snap: $("#carousel a"),
snapSpeed: 300,
momentum: false
});
//首次显示第二张
myScroll.goToPage(2, 0, 0);
var len = 7;
myScroll.on('scrollEnd',function (){
//调整期间，不允许滚动
myScroll.disable();
var currentPage = myScroll.currentPage;
//向左划到第一张时，跳到倒数第二张
if(currentPage.pageX == 1){
setTimeout(function(){
myScroll.goToPage(len-3,0,0);
myScroll.enable();
},10);
//向右划到倒数第一张时，跳到第二张
}else if(currentPage.pageX >= len -2){
setTimeout(function(){
myScroll.goToPage(2,0,0);
myScroll.enable();
},10);
}else{
myScroll.enable();
}
});
//定时轮播
setInterval(function(){
var pageX = myScroll.currentPage.pageX;
try {
myScroll.goToPage(++pageX, 0);
} catch (e) {
console.log('autoScroll error', e);
}
},1000);
</script>
</body>
</html>
