JS 移动端轮播图案例

 1  body {
 2             margin: 0;
 3         }
 4         .hearder {
 5             width: 100%;
 6             height: 150px;
 7             position: relative;
 8         }
 9         ul {
10             list-style: none;
11             padding: 0;
12             width: 500%;
13             height: 100%;
14             overflow: hidden;
15             margin-left: -200%;
16         }
17         ul>li {
18             width: 20%;
19             height: 100%;
20             display: inline-block;
21         }
22         ul>li {
23             float: left;
24         }
25         ul>li>img {
26             width: 100%;
27             height: 100%;
28         }
29         ol{
30             position: absolute;
31             bottom: 5px;
32             right: 5px;
33             list-style: none;
34             padding: 0;
35             margin: 0;
36             z-index: 9999;
37         }
38         ol>li{
39             display:inline-block;
40             width: 5px;
41             height: 5px;
42             background-color: pink;
43             border-radius: 2px;
44             transform: all .3s;
45         }
46         .current{
47             width: 10px;
48         }

 1 <div class="hearder">
 2         <ol>
 3             <li class="current"></li>
 4             <li></li>
 5             <li></li>
 6         </ol>
 7             <ul>
 8                 <li>
 9                     <img src="../imges/lbt.jpg" alt="">
10                 </li>
11                 <li>
12                     <img src="../imges/lbt2.jpg" alt="">
13                 </li>
14                 <li>
15                     <img src="../imges/lbt3.jpg" alt="">
16                 </li>
17             </ul>
18     </div>

 1 window.addEventListener('load', function () {
 2     var header = document.querySelector('.hearder')
 3     var ul = header.children[1];
 4     var ol = header.children[0]
 5     var w = header.offsetWidth;
 6 
 7     var index = 0;
 8     var timer = setInterval(function () {
 9         index++;
10         var transform = index * w;
11         ul.style.transition = 'all .3s'
12         ul.style.transform = 'translateX(' + transform + 'px)'
13     }, 2000)
14 
15     
16     ul.addEventListener('transitionend', function () {
17         if (index >= 3) {
18             index = 0;
19             ul.style.transition = 'none'
20             var translateX = -index * w;
21             ul.style.transform = 'translateX(' + translateX + 'px)'
22         } else if (index < 0) {
23             index = 2;
24             ul.style.transition = 'none'
25             var translateX = -index * w;
26             ul.style.transform = 'translateX(' + translateX + 'px)'
27         }
28         // 小圆点跟随图片变化
29         ol.querySelector('.current').classList.remove('current')
30         ol.children[index].classList.add('current')
31     })
32 
33 
34     // 手指滑动轮播图
35     // 触摸元素touchstart  获取手指初始坐标
36     var startX = 0;
37     var moveX = 0;  //因为后面会使用这个移动距离所以要定义一个全局变量
38     var flag = false
39     ul.addEventListener('touchstart', function (e) {
40         startX = e.targetTouches[0].pageX;
41         clearInterval(timer)
42     })
43     ul.addEventListener('touchmove', function (e) {
44         moveX = e.targetTouches[0].pagex - startX;
45         var translateX = -index * w + moveX;
46         // 手指拖动的时候不需要动画效果所以要去掉过渡效果
47         ul.style.transition = 'none'
48         ul.style.transform = 'translateX(' + translateX + 'px)'
49         flag = true;    //如果用户手指移动过我们再去判断是否不做判断效果
50         e.preventDefault();  //阻止滚动屏幕的行为
51         
52     })
53 
54 
55     // 手指离开 根据移动的距离判断是回弹上一张函数下一张
56     ul.addEventListener('touchend', function (e) {
57         if (flag) {
58             if (Math.abs(moveX) > 50) {
59                 // 如果是右滑就播放上一张  moveX是正值
60                 // 如果是左滑就播放下一张 moveX是负值
61                 if (moveX > 0) {
62                     index--;
63                 } else {
64                     index++;
65                 }
66                 var translateX = -index * w;
67                 ul.style.transition = 'all .3s'
68                 ul.style.transform = 'translateX(' + translateX + 'px)'
69             } else {
70                 var translateX = -index * w;
71                 ul.style.transition = 'all .1s'
72                 ul.style.transform = 'translateX(' + translateX + 'px)'
73             }
74         }
75         // 手指离开就重新开启定时器
76         clearInterval(timer)
77         var timer = setInterval(function () {
78             index++;
79             var transform = index * w;
80             ul.style.transition = 'all .3s'
81             ul.style.transform = 'translateX(' + transform + 'px)'
82         }, 2000)
83 
84     })
85 })