使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果，这个效果是什么样我就不截图了。昨天做练习，练习要求是使用iscroll实现焦点图的无限循环滚动，并且当手指触摸焦点图后，停止焦点图的循环滚动。第一次接触iscroll，仿照iscroll官方文档的demo，迅速做了一个焦点图自动滚动的例子，但……是……问题来了，iscroll的官方文档中没有说怎么实现无限循环，不会吧，应该有吧，我抱着怀疑的心态，找啊找，官方文章找了好几个版本，每个版本都看了1、2遍，没有……真的没有……啊，那怎么办……。看来只能自己想了，可是过好久都没头绪，连iscroll怎么用都不熟。等等，网上大神那么多，肯定有人做过的，借鉴借鉴，搜，度娘给了好多东西，真的好多东东，可………是……，点开了没一个是我需要的，博客园 csdn也找了，结果都没找到。
沮丧，失望，还是靠自己吧，昨天鼓捣了2、3个钟，想到在焦点图的父类中循环插入节点的方法然后不断改变容器的宽度，试了下没有成功；后来又想到可以不断改变焦点图的margin结果也没成功。昨天还想起了其他办法，当然结果都一样，如果昨天成功了，就不会有今天这博客了（懒）。这个程序没有考虑兼容不同的屏幕尺寸，需要兼容你们自己调。
1、首先说html结构，结构很简单。 wrapper里放的就是焦点图内容。重点是焦点图最后一则跟第一则使用的图片是一样的 jdt1.jpg,这点很重要，因为要保证焦点图平滑的始终向一个方向，两个图片必须相同，后面看到js你就会明白原因，我这里选择的是左方滚动。 看图片链接你们应该能猜到我是那个公司的人了吧，嘘！！！
<div id="wrapper"> <div id="scroller"> <ul id="scrollUl"> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt1.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt2.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt3.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt4.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt5.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt1.jpg"></li> </ul> </div> </div> <div id="footer"></div>
2、css样式，css是参考官网demo的样式里面有很多样式值得学习，尤其是带前缀的样式，我一直是做pc的，这些样式我还是第一次接触。值得说明的一点是，要使用iscroll的元素其position必须为absolute。在这个例子中#scroller的position必须为absolute。 另外一定需要说明的是我这边的图片大小是350x200，焦点图一共6则（最后一则是假的纯粹是为了做自动滚动效果加的），所以#scroller的宽度为2100px。 #scroller的宽度一旦设置之后，iscroll就会按照这个宽度去展示你的焦点图，即使你后边用程序修改#scroller的宽度，比如你又添加了一个li标签，并且修改了#scroller的宽度为2450px，但是iscroll依旧只显示2100px的宽度，超过的部分就会被弹回，除非你调用refersh（）方法刷新iscroll
*{
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html{ -ms-touch-action:none; } body{ padding:0; margin:0; } #header{ width:100%; height:40px; background:#cd235c; text-align:center; position:absolute; top:0px; left:0px; z-index:2; line-height:40px; font-weight:bold; color:#eee; } #wrapper{ position:absolute; top:40px; left:0px; bottom:48px; background:#ccc; border-top:1px solid; z-index:1; width:100%; overflow:hidden; } #scroller{ position:absolute; width:2100px; height:100%; top:0; left:0; -webkit-tap-hightlight-color:ragb(0,0,0,0); -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none; text-size-adjust:none; } #wrapper ul{ list-style-type:none; margin:0px; padding:0px; width:100%; height:100%; } #wrapper li{ width:350px; height:100%; float:left; } #footer{ width:100%; height:48px; background:#444; position:absolute; bottom:0px; left:0px; z-index:2; } img{ width:350px; }
3.重点来了，js代码，其实js代码很少，但是有些地方需要灵活运用，我使用的是原生js。
3.1 初始化iscroll，允许水平滚动，不允许垂直滚动，鼠标滚轮滚动的时候焦点图滑动
var myScroll = new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true});
3.2 焦点图自动滚动的函数。
在初始化的变量中curLeft 为焦点图向左滚动的时候的滚动偏移量。使用循环定时器调用iscroll的scrollTo方法每隔一秒移动一个焦点图，因为图片宽度为350，所以每一秒curLeft的增量是-350，当curLeft为-1750的时候，焦点图滚动到最后一则，重点来了，当焦点图到达最后一则时我们使用setTimeout来偷梁换柱，因为焦点图是每隔1000ms切换一张图片的，切换图片用时200ms 剩下的800ms，就给了我们可乘之机。利用200ms-1000ms这段时间，我这里选择的是500ms，我们重新初始化所有的东东，curLeft设置为0；销毁原来的iscroll对象（myScroll），重新生成一个iscroll对象；代码如下：
var curLeft=0,timeInterH,timeoutH; timeInterH=setInterval(function(){ curLeft-=350; if(curLeft==-1750){ timeoutH=setTimeout(function(){ curLeft=0; myScroll.destroy(); myScroll=new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true}); },500) } myScroll.scrollTo(curLeft,0,200); },1000)
3.3 当手指触摸到焦点图的时候，清空定时器停止焦点图自动滚动，因为现在焦点图第一张图片跟最后一张图片是相同的，为了避免用户翻看焦点图的时候看到两张相同的图片。我们需要隐藏掉最后一张图片。这里是把#scroller的宽度设置成5张图片的宽度，1750px，这样网友就看不到最后一张图片了，重点是这里需要refresh一下iscroll，否则即使你改了宽度也不生效
var find=function(id){return document.getElementById(id)} var sUl=find("scrollUl"); sUl.addEventListener("touchstart",function(){ find("scroller").style.width="1750px"; myScroll.refresh(); clearInterval(timeInterH); clearTimeout(timeoutH); },false)
完整的js代码如下：
var myScroll = new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true}); var curLeft=0,timeInterH,timeoutH; timeInterH=setInterval(function(){ curLeft-=350; if(curLeft==-1750){ timeoutH=setTimeout(function(){ curLeft=0; myScroll.destroy(); myScroll=new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true}); },500) } myScroll.scrollTo(curLeft,0,200); },1000) var find=function(id){return document.getElementById(id)} var sUl=find("scrollUl"); sUl.addEventListener("touchstart",function(){ find("scroller").style.width="1750px"; myScroll.refresh(); clearInterval(timeInterH); clearTimeout(timeoutH); },false) //禁止touchmove事件，作用应该是避免在焦点图上手指移动的时候，造成不必要的bug document.addEventListener("touchmove",function(e){e.preventDefault()},false);
整个程序的完整代码如下：
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <script src="http://www1.pcauto.com.cn/test/test/pcauto150811/iscroll.js"></script> <style> *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html{ -ms-touch-action:none; } body{ padding:0; margin:0; } #header{ width:100%; height:40px; background:#cd235c; text-align:center; position:absolute; top:0px; left:0px; z-index:2; line-height:40px; font-weight:bold; color:#eee; } #wrapper{ position:absolute; top:40px; left:0px; bottom:48px; background:#ccc; border-top:1px solid; z-index:1; width:100%; overflow:hidden; } #scroller{ position:absolute; width:2100px; height:100%; top:0; left:0; -webkit-tap-hightlight-color:ragb(0,0,0,0); -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -o-text-size-adjust:none; text-size-adjust:none; } #wrapper ul{ list-style-type:none; margin:0px; padding:0px; width:100%; height:100%; } #wrapper li{ width:350px; height:100%; float:left; } #footer{ width:100%; height:48px; background:#444; position:absolute; bottom:0px; left:0px; z-index:2; } img{ width:350px; } </style> </head> <body> <div id="header">我是焦点图</div> <div id="wrapper"> <div id="scroller"> <ul id="scrollUl"> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt1.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt2.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt3.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt4.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt5.jpg"></li> <li><img src="http://www1.pcauto.com.cn/test/test/pcauto150813/jdt1.jpg"></li> </ul> </div> </div> <div id="footer"></div> <script> var myScroll = new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true}); var curLeft=0,timeInterH,timeoutH; timeInterH=setInterval(function(){ curLeft-=350; if(curLeft==-1750){ timeoutH=setTimeout(function(){ curLeft=0; myScroll.destroy(); myScroll=new IScroll("#wrapper",{scrollX:true,scrollY:false,mouseWheel:true}); },500) } myScroll.scrollTo(curLeft,0,200); },1000) var find=function(id){return document.getElementById(id)} var sUl=find("scrollUl"); sUl.addEventListener("touchstart",function(){ find("scroller").style.width="1750px"; myScroll.refresh(); clearInterval(timeInterH); clearTimeout(timeoutH); },false) //禁止touchmove事件，避免在焦点图上手指移动的时候，造成不必要的bug document.addEventListener("touchmove",function(e){e.preventDefault()},false); </script> </body> </html>
总结：其实这个如果焦点图轮播的功能，如果不用iscroll，直接用原生js应该更加简单，iscroll应该有更强的的用处吧，慢慢感受。现在越来越体会到算法在程序中的重要性，看完两本大作《JavaScript高级程序设计》和《JavaScript权威指南》JavaScript的基础知识点差不多就见过了，未来重要的就是灵活运用，利用各种各样的思想去组织自己粗糙的程序，路漫漫其修远兮，吾将上下而求索。多学习多努力吧,会有结果的。
ps：上面我说的东东，也许大神们都已经做过而没有出来分享，或者大神们以为是雕虫小技而不屑于顾，但是对我这小虾米来说，每一点进步都很重要，哈哈。
二维码是效果链接：
