功能描述：
自动无缝轮播图片，底部小圆点跟图片保持一致；手指左右移动轮播图，移动距离大于50px播放下一张（或上一张），小于50px则回弹
具体功能实现：
1.定时器 自动轮播图片
先声明一个index=0用来存图片索引；
添加一个定时器，每隔两秒调用一次，每调用一次定时器（图片播放一次）index就加一；
通过transform（变形）属性和transition（过渡）属性实现图片的轮播。
var index = 0;
var timer = setInterval(function() {
index++;
var translatex = -index * w; // ul要移动的距离
ul.style.transition = 'all .4s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
2.实现无缝轮播并让小圆点和图片一致
给ul绑定监听函数（每次轮播移动的都是整个ul），过渡结束（transitionend）时执行；
判断索引index是否大于等于3，是的话说明已经播放到最后一张，让index=0并去掉过渡效果，快速回到第一张；
判断索引是否小于0，小于0说明用户一开始是往前滑的，让index=2并去掉过渡效果，快速到最后一张；
让底部小圆点跟着一起动（给当前li添加类，把其他的li删除类）
ul.addEventListener('transitionend', function() {
if(index >= 3) {
index = 0;
ul.style.transition = ''; // 去掉过渡效果
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if(index < 0) {
index = 2;
ul.style.transition = '';
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
// 让底部小圆点跟着一起动
// 将带有current类的li去掉该类
ol.querySelector('.current').classList.remove('current');
// 给当前li添加current类
ol.children[index].classList.add('current');
})
3.实现图片跟随手指移动先声明几个变量用来存储手指初始位置、手指是否在屏幕上移动以及手指移动的距离
var startX = 0; // 手指初始位置
var moveX = 0; // 手指在屏幕上移动的距离
var flag = false; // 记录用户是否移动了手指
给ul绑定手指触摸事件，记录手指触摸的初始位置，并清除定时器（不让它自动轮播了）
ul.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX; // 手指的初始触摸位置（左右轮播，只记录x就可以了）
clearInterval(timer);
})
给ul绑定手指移动事件
ul.addEventListener('touchmove', function(e) {
moveX = e.targetTouches[0].pageX - startX; // 手指移动的距离
var translatex = -index * w + moveX;
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translatex + 'px)';
flag = true; // 手指移动了，将flag改为true
e.preventDefault(); // 阻止屏幕滚动的默认行为（防止用户移动轮播图的时候屏幕也跟着上下滚动）
})
4.实现手指离开后图片的轨迹看用户是否移动了图片，flag为true才去判断：
①手指移动距离大于50px图片播放上一张或下一张②手指移动距离小于50px图片回弹；
结束后把flag改为false，并重新开启定时器让它继续自动轮播
ul.addEventListener('touchend', function(e) {
if(flag) { // flag==true（移动图片）时才去判断用户的移动方向和距离
if(Math.abs(moveX) > 50) { // 移动距离大于50时 滑向上一张或下一张（moveX可能为正也可能为负，Math.abs()取绝对值）
if(moveX > 0) { // 大于0右滑 图片索引减一
index--;
} else { // 小于0左滑 图片索引加一
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
} else { // 小于50px就回弹
var translatex = -index * w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}
}
// 结束后 把flag重新改为false，并开启定时器让图片开始轮播
flag = false;
// 先清除再开启，保证只有一个定时器在运行（不然会有bug）
clearInterval(timer);
timer = setInterval(function() {
index++;
var translatex = -index * w;
ul.style.transition = 'all .4s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
})
注：功能还可以继续优化，比如动态添加图片，动态添加底部小圆点等。具体实现方法可以参照我上一篇 JavaScript实现动态轮播图效果 。
具体实现代码如下：
HTML代码：
<div class="focus">
<ul>
<!-- 用户可能一开始往上一张滑，所以要多添加一个focus3 -->
<li><img src="data:images/focus3.jpg" alt=""></li>
<li><img src="data:images/focus1.jpg" alt=""></li>
<li><img src="data:images/focus2.jpg" alt=""></li>
<li><img src="data:images/focus3.jpg" alt=""></li>
<li><img src="data:images/focus1.jpg" alt=""></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
CSS代码：
* {
margin:;
padding:;
}
body {
margin: 0 auto;
max-width: 540px;
min-width: 320px;
background: #f6f6f6;
}
.focus {
width: 100%;
position: relative;
margin-top: 50px;
overflow: hidden;
}
.focus ul {
width: 500%;
overflow: hidden;
margin-left: -100%;
}
.focus ul li {
float: left;
width: 20%;
}
.focus ul img {
width: 100%;
}
.focus ol {
position: absolute;
bottom: 5px;
right: 5px;
}
.focus ol li {
width: 5px;
height: 5px;
display: inline-block;
background-color: #fff;
border-radius: 4px;
transition: all .2s;
}
.focus .current {
width: 15px;
}
JavaScript代码：
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var ul = focus.children[0]; // 获取focus的第一个孩子，也就是ul
var ol = focus.children[1];
var w = focus.offsetWidth; // 获取focus的宽度
var index = 0; // 用来记录图片索引
var timer = setInterval(function() { // 添加定时器，两秒调用一次
index++; // 每调用一次（轮播一次），图片索引号+1
var translatex = -index * w; // ul要移动的距离
ul.style.transition = 'all .4s'; // 添加过渡属性（css3里的属性）
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
// 给ul绑定监听函数（每次轮播移动的都是整个ul） 过渡结束（transitionend）时执行
ul.addEventListener('transitionend', function() {
if(index >= 3) { // 索引 > 3说明已经轮播到最后一张了
index = 0;
// 去掉过渡效果 快速回到第一张
ul.style.transition = '';
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if(index < 0) { // 索引 < 0说明用户一开始是往前滑的
index = 2;
ul.style.transition = '';
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
// 让底部小圆点跟着一起动
// 将带有current类的li去掉该类
ol.querySelector('.current').classList.remove('current');
// 给当前li添加current类
ol.children[index].classList.add('current');
})
// 手指滑动轮播图
var startX = 0; // 用来存储手指初始位置
var moveX = 0; // 用来存储手指在屏幕上移动的距离
var flag = false; // 记录用户是否在图上移动了手指
// 给ul绑定手指触摸事件
ul.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX; // 手指的初始触摸位置（左右轮播，只记录x就可以了）
clearInterval(timer); // 当手指触摸屏幕时清除定时器（不让它自动轮播了）
})
// 给ul绑定手指移动事件
ul.addEventListener('touchmove', function(e) {
moveX = e.targetTouches[0].pageX - startX; // 手指移动的距离
var translatex = -index * w + moveX;
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translatex + 'px)';
flag = true; // 手指移动了，将flag改为true
e.preventDefault(); // 阻止屏幕滚动的默认行为
})
// 给ul绑定手指离开事件
ul.addEventListener('touchend', function(e) {
if(flag) { // flag==true（移动图片）时才去判断用户的移动方向和距离
if(Math.abs(moveX) > 50) { // 移动距离大于50时 滑向上一张或下一张（moveX可能为正也可能为负，Math.abs()取绝对值）
if(moveX > 0) { // 大于0右滑 图片索引减一
index--;
} else { // 小于0左滑 图片索引加一
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
} else { // 小于50px就回弹
var translatex = -index * w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}
}
// 结束后 把flag重新改为false，并开启定时器让图片开始轮播
flag = false;
// 先清除再开启，保证只有一个定时器在运行（不然会有bug）
clearInterval(timer);
timer = setInterval(function() {
index++;
var translatex = -index * w;
ul.style.transition = 'all .4s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
})
})