欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS实现移动端轮播图

程序员文章站 2022-05-09 17:34:26
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致;手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个index=0用来存图片索引; 添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index ......

功能描述:

自动无缝轮播图片,底部小圆点跟图片保持一致;手指左右移动轮播图,移动距离大于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 })