使用 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：上面我說的東東，也許大神們都已經做過而沒有出來分享，或者大神們以為是雕蟲小技而不屑於顧，但是對我這小蝦米來說，每一點進步都很重要，哈哈。

　　二維碼是效果鏈接：