原生JS实现移动端轮播图

功能描述：

自动无缝轮播图片，底部小圆点跟图片保持一致；手指左右移动轮播图，移动距离大于50px播放下一张（或上一张），小于50px则回弹

具体功能实现：

1.定时器 自动轮播图片

先声明一个index=0用来存图片索引；

添加一个定时器，每隔两秒调用一次，每调用一次定时器（图片播放一次）index就加一；

通过transform（变形）属性和transition（过渡）属性实现图片的轮播。

1 var index = 0;
2 var timer = setinterval(function() {
3     index++;
4     var translatex = -index * w;  // ul要移动的距离
5     ul.style.transition = 'all .4s';
6     ul.style.transform = 'translatex(' + translatex + 'px)';
7 }, 2000);

2.实现无缝轮播并让小圆点和图片一致

给ul绑定监听函数（每次轮播移动的都是整个ul），过渡结束（transitionend）时执行；

判断索引index是否大于等于3，是的话说明已经播放到最后一张，让index=0并去掉过渡效果，快速回到第一张；

判断索引是否小于0，小于0说明用户一开始是往前滑的，让index=2并去掉过渡效果，快速到最后一张；

让底部小圆点跟着一起动（给当前li添加类，把其他的li删除类）

 1 ul.addeventlistener('transitionend', function() {
 2     if(index >= 3) {
 3         index = 0;
 4         ul.style.transition = '';  // 去掉过渡效果
 5         var translatex = -index * w;
 6         ul.style.transform = 'translatex(' + translatex + 'px)';
 7     } else if(index < 0) {
 8         index = 2;
 9         ul.style.transition = '';
10         var translatex = -index * w;
11         ul.style.transform = 'translatex(' + translatex + 'px)';
12     }
13     // 让底部小圆点跟着一起动
14     // 将带有current类的li去掉该类
15     ol.queryselector('.current').classlist.remove('current');
16     // 给当前li添加current类
17     ol.children[index].classlist.add('current');
18 })

3.实现图片跟随手指移动先声明几个变量用来存储手指初始位置、手指是否在屏幕上移动以及手指移动的距离

var startx = 0;    // 手指初始位置
var movex = 0;     // 手指在屏幕上移动的距离
var flag = false;    // 记录用户是否移动了手指

给ul绑定手指触摸事件，记录手指触摸的初始位置，并清除定时器（不让它自动轮播了）

1 ul.addeventlistener('touchstart', function(e) {
2     startx = e.targettouches[0].pagex;  // 手指的初始触摸位置（左右轮播，只记录x就可以了）
3     clearinterval(timer);
4 })

给ul绑定手指移动事件

1 ul.addeventlistener('touchmove', function(e) {
2     movex = e.targettouches[0].pagex - startx;   // 手指移动的距离
3     var translatex = -index * w + movex;
4     ul.style.transition = 'none';
5     ul.style.transform = 'translatex(' + translatex + 'px)';
6     flag = true;    // 手指移动了，将flag改为true
7     e.preventdefault();   // 阻止屏幕滚动的默认行为（防止用户移动轮播图的时候屏幕也跟着上下滚动）
8 })

4.实现手指离开后图片的轨迹看用户是否移动了图片，flag为true才去判断：

①手指移动距离大于50px图片播放上一张或下一张②手指移动距离小于50px图片回弹；

结束后把flag改为false，并重新开启定时器让它继续自动轮播

 1 ul.addeventlistener('touchend', function(e) {
 2     if(flag) {     // flag==true（移动图片）时才去判断用户的移动方向和距离
 3         if(math.abs(movex) > 50) {  // 移动距离大于50时 滑向上一张或下一张（movex可能为正也可能为负，math.abs()取绝对值）
 4             if(movex > 0) {  // 大于0右滑 图片索引减一
 5                 index--;
 6             } else {    // 小于0左滑 图片索引加一
 7                 index++;
 8             }
 9             var translatex = -index * w;
10             ul.style.transition = 'all .3s';
11             ul.style.transform = 'translatex(' + translatex + 'px)';
12         } else {    // 小于50px就回弹
13             var translatex = -index * w;
14             ul.style.transition = 'all .1s';
15             ul.style.transform = 'translatex(' + translatex + 'px)';
16         }
17     }
18     // 结束后 把flag重新改为false，并开启定时器让图片开始轮播
19     flag = false;
20     // 先清除再开启，保证只有一个定时器在运行（不然会有bug）
21     clearinterval(timer);
22     timer = setinterval(function() {
23         index++;
24         var translatex = -index * w;
25         ul.style.transition = 'all .4s';
26         ul.style.transform = 'translatex(' + translatex + 'px)';
27     }, 2000);
28 })

注：功能还可以继续优化，比如动态添加图片，动态添加底部小圆点等。具体实现方法可以参照我上一篇 javascript实现动态轮播图效果 。

 

具体实现代码如下：

html代码：

 1 <div class="focus">
 2     <ul>
 3         <!-- 用户可能一开始往上一张滑，所以要多添加一个focus3 -->
 4         <li><img src="images/focus3.jpg" alt=""></li>
 5         <li><img src="images/focus1.jpg" alt=""></li>
 6         <li><img src="images/focus2.jpg" alt=""></li>
 7         <li><img src="images/focus3.jpg" alt=""></li>
 8         <li><img src="images/focus1.jpg" alt=""></li>
 9     </ul>
10     <ol>
11         <li class="current"></li>
12         <li></li>
13         <li></li>
14     </ol>
15 </div>

 

css代码：

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     margin: 0 auto;
 7     max-width: 540px;
 8     min-width: 320px;
 9     background: #f6f6f6;
10 }
11 .focus {
12     width: 100%;
13     position: relative;
14     margin-top: 50px;
15     overflow: hidden;
16 }
17 .focus ul {
18     width: 500%;
19     overflow: hidden;
20     margin-left: -100%;
21 }
22 .focus ul li {
23     float: left;
24     width: 20%;
25 }
26 .focus ul img {
27     width: 100%;
28 }
29 .focus ol {
30     position: absolute;
31     bottom: 5px;
32     right: 5px;
33 
34 }
35 .focus ol li {
36     width: 5px;
37     height: 5px;
38     display: inline-block;
39     background-color: #fff;
40     border-radius: 4px;
41     transition: all .2s;
42 }
43 .focus .current {
44     width: 15px;
45 }

 

javascript代码：

 1 window.addeventlistener('load', function() {
 2     var focus = document.queryselector('.focus');
 3     var ul = focus.children[0];   // 获取focus的第一个孩子，也就是ul
 4     var ol = focus.children[1];
 5     var w = focus.offsetwidth;    // 获取focus的宽度
 6     var index = 0;    // 用来记录图片索引
 7     var timer = setinterval(function() {    // 添加定时器，两秒调用一次
 8         index++;   // 每调用一次（轮播一次），图片索引号+1
 9         var translatex = -index * w;    // ul要移动的距离
10         ul.style.transition = 'all .4s';   // 添加过渡属性（css3里的属性）
11         ul.style.transform = 'translatex(' + translatex + 'px)';
12     }, 2000);
13     // 给ul绑定监听函数（每次轮播移动的都是整个ul）  过渡结束（transitionend）时执行
14     ul.addeventlistener('transitionend', function() {
15         if(index >= 3) {    // 索引 > 3说明已经轮播到最后一张了
16             index = 0;
17             // 去掉过渡效果 快速回到第一张
18             ul.style.transition = '';
19             var translatex = -index * w;
20             ul.style.transform = 'translatex(' + translatex + 'px)';
21         } else if(index < 0) {    // 索引 < 0说明用户一开始是往前滑的
22             index = 2;
23             ul.style.transition = '';
24             var translatex = -index * w;
25             ul.style.transform = 'translatex(' + translatex + 'px)';
26         }
27         // 让底部小圆点跟着一起动
28         // 将带有current类的li去掉该类
29         ol.queryselector('.current').classlist.remove('current');
30         // 给当前li添加current类
31         ol.children[index].classlist.add('current');
32     })
33     // 手指滑动轮播图
34     var startx = 0;    // 用来存储手指初始位置
35     var movex = 0;     // 用来存储手指在屏幕上移动的距离
36     var flag = false;    // 记录用户是否在图上移动了手指
37     // 给ul绑定手指触摸事件
38     ul.addeventlistener('touchstart', function(e) {
39         startx = e.targettouches[0].pagex;  // 手指的初始触摸位置（左右轮播，只记录x就可以了）
40         clearinterval(timer);    // 当手指触摸屏幕时清除定时器（不让它自动轮播了）
41     })
42     // 给ul绑定手指移动事件
43     ul.addeventlistener('touchmove', function(e) {
44         movex = e.targettouches[0].pagex - startx;   // 手指移动的距离
45         var translatex = -index * w + movex;
46         ul.style.transition = 'none';
47         ul.style.transform = 'translatex(' + translatex + 'px)';
48         flag = true;    // 手指移动了，将flag改为true
49         e.preventdefault();   // 阻止屏幕滚动的默认行为
50     })
51     // 给ul绑定手指离开事件
52     ul.addeventlistener('touchend', function(e) {
53         if(flag) {     // flag==true（移动图片）时才去判断用户的移动方向和距离
54             if(math.abs(movex) > 50) {  // 移动距离大于50时 滑向上一张或下一张（movex可能为正也可能为负，math.abs()取绝对值）
55                 if(movex > 0) {  // 大于0右滑 图片索引减一
56                     index--;
57                 } else {    // 小于0左滑 图片索引加一
58                     index++;
59                 }
60                 var translatex = -index * w;
61                 ul.style.transition = 'all .3s';
62                 ul.style.transform = 'translatex(' + translatex + 'px)';
63             } else {    // 小于50px就回弹
64                 var translatex = -index * w;
65                 ul.style.transition = 'all .1s';
66                 ul.style.transform = 'translatex(' + translatex + 'px)';
67             }
68         }
69         // 结束后 把flag重新改为false，并开启定时器让图片开始轮播
70         flag = false;
71         // 先清除再开启，保证只有一个定时器在运行（不然会有bug）
72         clearinterval(timer);
73         timer = setinterval(function() {
74             index++;
75             var translatex = -index * w;
76             ul.style.transition = 'all .4s';
77             ul.style.transform = 'translatex(' + translatex + 'px)';
78         }, 2000);
79     })
80 })