图片描述
移动端的轮播图可以有很多方式实现，最常见的可以使用定位 + 手指事件。但是我这里介绍的是 CSS3 中的 2d 变换和手指事件，因为变换属性的代码更加简洁优雅
一. 移动端的准备工作
* {
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 中的初始化
// 阻止浏览器的默认行为
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)
})();
// 点透
(function() {
var aNodes = document.querySelectorAll("a")
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].addEventListener("touchstart", function() {
window.location.href = this.href
})
}
})();
这里移动端写页面之前跟 PC 端有些不同，设计师给我们的像素值可能与移动设备不匹配，首先要进行rem 适配，还有阻止浏览器的默认行为，通常情况下，还有处理点透。
二. 基本手指事件
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)
})
这里设计的无缝轮播很巧妙，把图片的 li 标签复制了一份，也就是总共 10 张图，当滑到 1 图时，我们在点击后迅速切到第 6 张，当滑到最后一张图时，切换到第 5 张。
三. 自动轮播 + 小圆点逻辑
var autoSlide = function() {
setInterval(function() {
if(now == 9) {
now = 4
}
list.style.transition = 'none'
transformCss(list, 'translateX', -now * document.documentElement.clientWidth)
// 设置一个延时，让过渡生效
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)
}
这里自动轮播有几个逻辑
轮播的同时，小圆点跟着动，排他思想，先移走所有小圆点的类名，再单独添加
轮播到 10 张时，快速切换到第 5 张图，由于所有的滑动都是采用过渡，快速切换采用的清除过渡，所以要设置一个短暂的延时，让清除过渡不被覆盖。
四. 手指移入移出开关定时器