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