摘要：圖片描述移動(dòng)端的輪播圖可以有很多方式實(shí)現(xiàn)，最常見的可以使用定位手指事件。四手指移入移出開關(guān)定時(shí)器

圖片描述

移動(dòng)端的輪播圖可以有很多方式實(shí)現(xiàn)，最常見的可以使用定位 + 手指事件。但是我這里介紹的是 CSS3 中的 2d 變換和手指事件，因?yàn)樽儞Q屬性的代碼更加簡潔優(yōu)雅

* {
    padding: 0;
    margin: 0;
}
img {
    display: block;
}
li {
    list-style: none;
}
input {
    outline: none;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body {
    height: 100%;
    overflow: hidden;
}

CSS 中的初始化

       // 阻止瀏覽器的默認(rèn)行為
        document.addEventListener("touchstart", function(event) {
            event.preventDefault()
        });
        
        // rem 適配
        (function() {
            var styleNode = document.createElement("style")
            var width = document.documentElement.clientWidth
            styleNode.innerHTML = "html {font-size: "+ width/16 +"px;}"
            document.head.appendChild(styleNode)
        })();
        
        // 點(diǎn)透
        (function() {
            var aNodes = document.querySelectorAll("a")
            for (var i = 0; i < aNodes.length; i++) {
                aNodes[i].addEventListener("touchstart", function() {
                    window.location.href = this.href
                })
            }
        })();

這里移動(dòng)端寫頁面之前跟 PC 端有些不同，設(shè)計(jì)師給我們的像素值可能與移動(dòng)設(shè)備不匹配，首先要進(jìn)行rem 適配，還有阻止瀏覽器的默認(rèn)行為，通常情況下，還有處理點(diǎn)透。

        
        

            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
            
        


        var list = document.querySelector(".list")
        var li = document
        list.innerHTML += list.innerHTML
        
        var startX = 0
        var eleX = 0
        var translateX = 0
        var now = 0
        list.addEventListener("touchstart", function(event) {
            
            list.style.transition = "none"
            if (now == 0){
                now = 5
            } else if (now == 9) {
                now = 4
            }
            transformCss(list,"translateX",-now*document.documentElement.clientWidth)
            var touch = event.changedTouches[0]
            startX = touch.clientX
            eleX = transformCss(list, "translateX")
        })
        
        list.addEventListener("touchmove", function(event) {
            var touch = event.changedTouches[0]
            var endX = touch.clientX
            var disX = endX - startX
            translateX = disX + eleX
            
            // 清除過渡
            list.style.transition = "none"
            list.style.transform = transformCss(list,"translateX",translateX)
        })
        
        list.addEventListener("touchend", function() {
            
            var left = transformCss(list, "translateX")
            now = Math.round(-left / document.documentElement.clientWidth)
            
            translateX = -now * document.documentElement.clientWidth
            list.style.transition = "0.5s"
            transformCss(list,"translateX",translateX)
        })

這里設(shè)計(jì)的無縫輪播很巧妙，把圖片的 li 標(biāo)簽復(fù)制了一份，也就是總共 10 張圖，當(dāng)滑到 1 圖時(shí)，我們在點(diǎn)擊后迅速切到第 6 張，當(dāng)滑到最后一張圖時(shí)，切換到第 5 張。

    var autoSlide = function() {
        setInterval(function() {
            if(now == 9) {
                now = 4
            }
            list.style.transition = "none"
            transformCss(list, "translateX", -now * document.documentElement.clientWidth)

            // 設(shè)置一個(gè)延時(shí)，讓過渡生效
            setTimeout(function() {
                now++
                list.style.transition = "0.5s"
                transformCss(list, "translateX", -now * document.documentElement.clientWidth)
                for(var i = 0; i < spans.length; i++) {
                    spans[i].classList.remove("active")
                }
                spans[now % 5].classList.add("active")
            }, 20)

        }, 1000)
    }

這里自動(dòng)輪播有幾個(gè)邏輯

輪播的同時(shí)，小圓點(diǎn)跟著動(dòng)，排他思想，先移走所有小圓點(diǎn)的類名，再多帶帶添加

輪播到 10 張時(shí)，快速切換到第 5 張圖，由于所有的滑動(dòng)都是采用過渡，快速切換采用的清除過渡，所以要設(shè)置一個(gè)短暫的延時(shí)，讓清除過渡不被覆蓋。