web移動端_移動端的輪播

一、前言                                                                                    

移動端的輪播圖通常有以下幾個功能：

                                                      1. 自動輪播圖且無縫 定時器，過渡*/
                                                2. 小圓點點要隨着圖片的輪播改變 根據索引切換
                                                3. 滑動效果 利用touch事件完成*/
                                                4. 滑動結束的時候 如果滑動的距離不超過屏幕的1/3 吸附回去 
                                                5. 滑動結束的時候 如果滑動的距離超過屏幕的1/3 切換（上一張，下一張）根據滑動的方向，

二、基礎內容                                                                             

1、自動輪播圖實現：

 

      (1)先獲取到需要操作的dom

         

    /*輪播圖*/
    var banner = document.querySelector('.jd_banner');
    /*屏幕寬度*/
    var width = banner.offsetWidth;
    /*圖片容器*/
    var imageBox = banner.querySelector('ul:first-child');
    /*點容器*/
    var pointBox = banner.querySelector('ul:last-child');
    /*所有的點*/
    var points = pointBox.querySelectorAll('li');

 

 

           (2)利用定時器和index索引值讓輪播圖動起來

        var index = 1; //讓index的初始值為0
    var timer = setInterval(function(){//設置定時器
   
        index++//每秒中讓定時器值加1
        imageBox.style.transition = "all 0.2s" //加過渡
        imageBox.style.webkitTransition = "all 0.2s"


        /*移動*/
                /*每次ul移動的距離 = index * width*/
        imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
        imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';
    


    },2000)
          
       
    /*需要等最后一張動畫結束去判斷是否瞬間定位到第一張*/
    /*當index=9的時候，然后瞬間將當前的索引變為1*/
    imageBox.addEventListener('transitionend',function(){
        if(index >=9 ){ //當索引值大於9的時候，瞬間讓當前索引值為1
            index=1  ;
            /*清除過渡*/
            imageBox.style.transition='none'
            imageBox.style.webkitTransition='none'
            /*做位移*/
            /*移動：只能在自動滾動的時候無縫滾動，但是當用戶開始滑動的時候*/
            imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
            imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';
        }else if(index <=0 ){/*用戶向左邊，index小於等於0*/
            index=8;
            /*清除過渡*/
            imageBox.style.transition='none'
            imageBox.style.webkitTransition='none'
            /*做位移*/
            /*移動：只能在自動滾動的時候無縫滾動，但是當用戶開始滑動的時候需要停止無縫滾動*/
            imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
            imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';
        }

        
        /*此時此刻index的取值范圍只能是1-8了*/
        /*點的取值范圍是0-7*/
        console.log(index)

        setPoint() //設置了一個點高亮的函數

    })

   

 

 

 2. 小圓點點要隨着圖片的輪播改變 根據索引切換*/

 /*設置點的方法*/
    var setPoint = function(){
                   //先遍歷清除所有的now樣式
        for(var i=0; i<points.length; i++){
            var obj = points[i]

            /*清除樣式*/
            obj.classList.remove('now')

        }

              //然后給將要高亮的點加上樣式
        points[index - 1].classList.add('now');
    }

 

 

3. 滑動效果 利用touch事件完成*/

/*綁定滑動事件*/
        var startX = 0;    //初始化開始滑動時的坐標
        var distanceX = 0; //設置開始滑動的距離
        var isMove = false //標志是否滑動

    imageBox.addEventListener('touchstart',function(e){

        /*在鼠標一開始滑動的時候就清除定時器
                   不讓輪播圖有自動滾動的效果

               */
        clearInterval(timer)

        /*記錄起始位置的x坐標*/
        startX = e.touches[0].clientX;


    })

    imageBox.addEventListener('touchmove',function(e){
        
                isMove = true//開始滑動的時候isMove = true
        /*記錄滑動過程中的x坐標*/
        var moveX = e.touches[0].clientX;

        /*在滑動過程中作對比*/
        /*計算位移  有正負方向*/
         distanceX = moveX - startX

        /*這個用來計算目標元素的位移*/
        /*元素的定位等於當前定位*/
        /*目標定位 = 當前定位 + 手指移動的定位*/
        var translateX = -index * width + distanceX
        console.log(translateX)

          /*如果元素有過渡。肯能會有遲鈍的效果，所以在之前需要清除過渡*/
                 imageBox.style.transition='none'
        imageBox.style.webkitTransition='none'

        /*移動：只能在自動滾動的時候無縫滾動，但是當用戶開始滑動的時候*/
            imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
            imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';
          

    })

    
        

 

4、在滑動結束的時候判斷滑動的距離是否大於設備寬度是1/3.

     大於：切換到上一張或者下一張

     小於：讓輪播圖吸附回去，還是顯示之前那一張

imageBox.addEventListener('touchend',function(){
               
                //如果滑動的距離小於設備的1/3，就讓他吸附回去
        if(Math.abs(distanceX)<width/3 &&  isMove){
            //吸附回去
            /*清除過渡*/
            imageBox.style.transition='none'
            imageBox.style.webkitTransition='none'
            /*做位移*/
            /*移動：只能在自動滾動的時候無縫滾動，但是當用戶開始滑動的時候*/
            imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
            imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';


        }else{
            //切換
            //上一張
            //下一張
            //往左滑動是下一張，往右滑動是上一張
            //可以根據distance的正負方向來判斷滑動的方向
            if(distanceX>0){
                index--
                console.log('右')
            }else{
                index++
                console.log('左')
            }
            //根據index動畫的移動
            /*清除過渡*/
            imageBox.style.transition='none'
            imageBox.style.webkitTransition='none'
            /*做位移*/
            /*移動：只能在自動滾動的時候無縫滾動，但是當用戶開始滑動的時候*/
            imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
            imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';

        }

        //最后做一次參數重置
        startX=0;
        distanceX=0;
        isMove = true;
        clearInterval(timer)
        timer = setInterval(function(){
        /*加過渡*/
        index++
        imageBox.style.transition = "all 0.2s"
        imageBox.style.webkitTransition = "all 0.2s"


        /*移動*/
        imageBox.style.transform = 'translateX(' + (-index*width)+ 'px)';
        imageBox.style.webkitTransform = 'translateX(' + (-index*width) + 'px)';
        /*現在是可以滾動了，但是沒有加無縫效果*/

    },2000)

 

三、總結