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>