js原生選項卡（包含移動端無縫選項卡）三

今天分享下移動端原生js的無縫輪播圖；

移動端盡量減少使用DOM操作來頻繁的浪費移動端設備的性能，所以這個無縫輪播圖更多的使用了transition和transform，無縫的思想和昨天分享的PC端的無縫輪播的思想是一樣的，分別在正常的圖片的前面插入了最后一張圖片和在正常圖片的最后插入了第一張圖片，在運動到這兩張圖片時候瞬間清除transition並把整個圖片鏈拉回到正常圖片流的位置，從而從產生了無縫

這個移動端輪播圖中還闡述了一個思路：為了更好的考慮用戶的體驗，當用戶滑動屏幕的距離小於一定的值得時候我們圖片並不會更換到下一張，這個效果的產生得益於流程控制if判斷用戶按下手指和抬起手指的坐標差的值

相同的今天的例子中也使用了開關的概念，具體思路昨天的文章中已經闡述

今天的例子以640的分辨率為基准，並在js動態的改變onresize時候值，使我們的代碼滿足不同手機的尺寸

The best preparation for tomorrow is doing your best today.
過好今天，是對明天最好的准備

html代碼：

    <div id="tabs">
        <ul>
            <li style="background:pink;">3</li>
            <li style="background:red;">0</li>
            <li style="background:green;">1</li>
            <li style="background:yellow;">2</li>
            <li style="background:pink;">3</li>
            <li style="background:red;">0</li>
        </ul>
    </div>

css代碼：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no">
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style:none;
        }
        html{
            font-size:20px;
        }
        #tabs ul{
            width: 96rem;
            height: 100%;
            overflow:hidden;
            transform:translateX(-16rem);
        }
        #tabs ul li{
            width: 16rem;
            height: 7.5rem;
            float:left;
            font-size:3rem;
            color:#fff;
            text-align:center;
            line-height:7.5rem;
        }

js代碼：

        //以640的分辨率為基准分辨率設置的css模型尺寸，閉包中的代碼為實時改變單位尺寸
        (function(window,document){
            function change(){
                 var oHTML=document.getElementsByTagName('html')[0];
                oHTML.style.fontSize=20*document.documentElement.clientWidth/320+'px';
            }
            change();
            window.addEventListener('resize',change,false);
        })(window,document);

            document.addEventListener('DOMContentLoaded',function(){
                var oTab=document.getElementById('tabs');
                var oUl=oTab.getElementsByTagName('ul')[0];
                var aLi=oUl.children;
                var iNow=1;
                var x=-aLi[0].offsetWidth*iNow;
                //設置開關
                var bReady=false;

                oUl.addEventListener('touchstart',function(ev){
                    if(bReady){return;}
                    bReady=true;
                    oUl.style.transition='none';
                    //當開始觸摸的時候記錄按下的坐標
                    var downX=ev.targetTouches[0].pageX;
                    var disX=downX-x;

                    function fnMove(ev){
                        //在move的時候重新計算位移，並給ul賦值
                        x=ev.targetTouches[0].pageX-disX;
                        oUl.style.transform='translateX('+x+'px)';
                    }

                    function fnEnd(ev){
                        document.removeEventListener('touchmove',fnMove,false);
                        document.removeEventListener('touchend',fnEnd,false);
                        //在抬起的時候記錄抬起的位置，注意抬起的位置是changedTouches[0]
                        var upX=ev.changedTouches[0].pageX;
                        //開啟transition
                        oUl.style.transition='0.4s all ease';
                        //這里為了用戶體驗，判斷了一個最小移動距離，當移動距離小於這個值得時候並不發生運動
                        if((Math.abs(upX-downX))>50){
                            //判斷移動方向，是向右還是向左
                            if(downX>upX){
                                iNow++;
                                //設置移動范圍
                                if(iNow==aLi.length) iNow=aLi.length-1;
                            }else{
                                //和右面是相反的
                                iNow--;
                                if(iNow==-1) iNow=0;
                            }
                        }
                        //進行賦值
                        x=-aLi[0].offsetWidth*iNow;
                        oUl.style.transform='translateX('+x+'px)';

                        //設置ul的變化
                        function tEnd(){
                            //為了不讓瞬間拉回被發現，首先要清除transition
                            oUl.style.transition='none';
                            //進行無縫判斷，當圖片到右面倒數第二張的時候拉回到第二張
                            if(iNow==aLi.length-1){
                                iNow=1;
                            }else if(iNow==0){
                                //當圖片運動到第一張的時候瞬間拉回到倒數第三張
                                iNow=aLi.length-2;
                            }
                            x=-aLi[0].offsetWidth*iNow;
                            oUl.style.transform='translateX('+x+'px)';
                            bReady=false;
                        }
                        oUl.addEventListener('transitionend',tEnd,false);
                    }
                    document.addEventListener('touchmove',fnMove,false);
                    document.addEventListener('touchend',fnEnd,false);
                    ev.preventDefault();
                },false);
            },false);
    </script>