移動端滑動輪播圖

---恢複内容開始---

css樣式如下:

<style>
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html{
                font-size: 20px;
            }
            #wrap{
                width: 16rem;
                height: 7rem;
                margin: 0 auto;
                overflow: hidden;
            }
            #wrap ul{
                width: 80rem;
                height: 7rem;
                transform: translate3d(-16rem,0,0);
            }
            #wrap ul li{
                width: 16rem;
                height: 7rem;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 7rem;
                float: left;
            }
        </style>      

script.js如下:

代碼都有注釋

DOMContentLoaded事件和load事件的差別。
load事件是window對象上的事件。指的是網頁資源已經加載完畢（包括但不限于DOM、圖檔、音頻、腳本、插件資源以及CSS）

DOMContentLoaded事件是document對象上的事件。指的是DOM已經加載完畢。IE中有個私有的事件onreadystatechange事件跟這個标準事件類似。

是以DOMContentLoaded事件都會比load事件提前觸發。      

parse()

用于從一個字元串中解析出json

JSON.stringify

用于從一個對象解析成字元串

　　　　　　<script>
            document.addEventListener('DOMContentLoaded',function(){
                var oUl = document.querySelectorAll('#wrap ul')[0];
                var aLi = oUl.children;
                var bSing = true;
                //儲存目前在第一個頁面
                var iNow = 1;
                var x = -iNow * aLi[0].offsetWidth;
                oUl.addEventListener('touchstart',function(ev){
                    if (bSing == false)return;
                    bSing = false;
                    //手指按下的時候
                    var downX = ev.targetTouches[0].pageX;
                    var disX = downX - x;
                    
                    function fnMove(ev){
                        x = ev.targetTouches[0].pageX - disX;
                        //translate3d 開啟手機滑動硬體加速
                        oUl.style.WebkitTransform ='translate3d(' + x + 'px,0,0)';
                    };
                    
                    function fnEnd(ev){
                        //清除兩個事件
                        oUl.removeEventListener('touchmove',fnMove,false);
                        oUl.removeEventListener('touchend',fnEnd,false);
                        
                        //手指擡起的時候
                        var upX = ev.changedTouches[0].pageX;
                        //有個transition 動畫效果
                        oUl.style.WebkitTransition = 'all .3s ease';
                        //從左到右滑動時是負數，是以要用Math.abs()
                        if (Math.abs(upX - downX) > 80) {
                            //切換到下一張
                            if (downX > upX) {
                                //目前頁面 ++ 
                                iNow ++;
                                if (iNow == aLi.length)iNow = aLi.length - 1;
                            } else{
                                //否則 --
                                iNow --;
                                if (iNow == -1)iNow = 0;
                            };
                        }; 
                        x = -iNow * aLi[0].offsetWidth;
                        //再次執行transition 動畫效果
                        oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                    
                        //運動結束的标志
                            function moveEnd(){
                                bSing = true;
                                //清除transition 動畫效果
                                oUl.removeEventListener('transitionend',moveEnd,false);
                                //左邊
                                if(iNow == aLi.length - 1){
                                    iNow = 1;
                                    x = -iNow * aLi[0].offsetWidth;
                                    oUl.style.WebkitTransition = 'none';
                                    oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                                }
                                //右邊
                                if (iNow == 1) {
                                    iNow = 3;
                                    x = -iNow * aLi[0].offsetWidth;
                                    oUl.style.WebkitTransition = 'none';
                                    oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                                }
                                document.title = iNow;
                            }
                            //監聽transition動畫效果
                        oUl.addEventListener('transitioned',moveEnd,false);
                    };
                    //監聽move&end事件
                    oUl.addEventListener('touchmove',fnMove,false);
                    oUl.addEventListener('touchend',fnEnd,false);
                    //阻止預設事件
                    ev.preventDefault();
                },false);
            },false);
        </script>      

body内容如下:

<div id="wrap">
      <ul>
          <li style="background: slateblue;">Slide 3</li>
          <li style="background: salmon;">Slide 1</li>
          <li style="background: skyblue;">Slide 2</li>
          <li style="background: slateblue;">Slide 3</li>
          <li style="background: salmon;">Slide 1</li>
       </ul>
</div>      

具體情況看自己需求，如有什麼不明白私信或留言給我。

---恢複内容結束---

轉載于:https://www.cnblogs.com/Mousika/p/7242264.html