原生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 })