js轮播图_js轮播图越来越快

作者：知新_RL | 2024-02-20 20:54:39

踩

js轮播图越来越快

轮播图效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        img {
            vertical-align: bottom;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .focus {
            overflow: hidden;
            position: relative;
            width: 721px;
            height: 455px;
            /*margin: 100px auto;*/
            /*需要换种居中的方式,上面导致获取的focusWidth不准确*/
            /*margin: 100px 0 0 100px;*/
            /*或者用定位这种*/
            left: 50%;
            transform:translateX(-50%) translateY(100px);
            background-color: pink;
        }

        .focus a[class^=arrow] {
            position: absolute;
            z-index: 1;
            text-decoration: none;
            display: block;
            background-color: rgba(0,0,0,.3);
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 20px;
            line-height: 35px;
            color: #ccc;
        }

        .focus .arrow-l {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: all .3s;
        }

        .focus .arrow-r {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: all .3s;
        }

        .focus a[class^=arrow]:hover {
            color: #fff;
        }

        .focus ul {
            width: 500%;
            position: absolute;
        }

        ul li {
            float: left;
        }

        ol {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform:translateX(-50%);
        }

        ol li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 2px solid #fff;
            margin-right: 10px;
            cursor: pointer;
        }

        .active {
            background-color: #fff;
        }


    </style>
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

    <div class="focus">
        <a class="arrow-l" href="javascript:;"><</a>
        <a class="arrow-r" href="javascript:;">></a>
        <ul>

            <li>
                <a href="#">
                    <img src="upload/focus.jpg" alt="xx">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/focus1.jpg" alt="xx">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/focus2.jpg" alt="xx">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/focus3.jpg" alt="xx">
                </a>
            </li>
        </ul>
        <ol class="circle">

        </ol>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

window.onload = function () {

    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    var arrowL = document.querySelector('.arrow-l');
    var arrowR = document.querySelector('.arrow-r');
    var ul = document.querySelector('.focus ul');
    var lis = document.querySelectorAll('.focus ul li');
    var circle = document.querySelector('.circle');

    var flag = true // 节流开关，防止轮播图按钮连续点击造成播放过快


    // 克隆第一张图片到后面，以便做无缝滚动
    var firstCopy = lis[0].cloneNode(true);
    ul.appendChild(firstCopy)

    var index = 0; // 图片的索引

    // 右边的按钮
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag = false //
            if (index == lis.length) {
                index = 0;
                ul.style.left = 0 + 'px';
            }
            index++;
            index == lis.length?activate(0):activate(index)
            animate(ul, -index * focusWidth,function () {
                console.log('节流阀打开');
                flag = true // 当运动完成后,打开节流阀
            })
        }

    })

    // 左边的按钮
    arrowL.addEventListener('click', function () {
        if (flag) {
            flag = false
            if (index == 0) {
                ul.style.left = -lis.length * focusWidth + 'px';
                index = 4;
            }
            index--;
            activate(index);
            animate(ul, -index * focusWidth,function () {
                flag = true // 当运动完成后,打开节流阀
            })
        }

    })

    // 自动轮播
    var autoPlay = setInterval(function () {
        arrowR.click() // 调用元素的点击，触发点击事件
    },3000)

    focus.addEventListener('mouseenter',function () {
        clearInterval(autoPlay)
    })

    focus.addEventListener('mouseleave',function () {
        autoPlay = setInterval(function () {
            arrowR.click()
        },3000)
    })

    // 圆点处理
    for (let i = 0; i < lis.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i)
        circle.appendChild(li)
    }

    // 给圆点的父元素绑定事件(事件委托)
    circle.addEventListener('click',function (e) {
        var idx = e.target.getAttribute('index');
        if (!idx) {
            return
        }
        activate(idx)
        animate(ul,-idx * focusWidth)
    })

    // 默认先选中第一个
    circle.children[0].className = 'active'

    function activate(i) {
        for (let j = 0; j < circle.children.length; j++) {
            circle.children[j].className = ''
        }
        circle.children[i].className = 'active'
    }


}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				vertical-align: top;
			}
			
			.outer {
				width: 500px;
				height: 330px;
				margin: 20px auto;
				background-color: #bfa;
				padding: 10px;
				overflow: hidden;
			}
			
			.outer .pic-list {
				position: absolute;
			}
			
			.outer {
				position: relative;
			}
			
			.outer ul li {
				float:left;
				margin-right: 10px;
			}
			
			.outer ul li:last-child {
				margin-right: 0;
			}
			
			.outer ul li img {
				width: 500px;
				height: 330px;
			}
			
			.nav {
				position: absolute;
				bottom: 20px;
				font-size: 0;
				text-align: center;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			
			.nav a {
				display: inline-block;
				font-size: 15px;
				text-decoration: none;
				width: 10px;
				height: 10px;
				border: 3px solid #ff3ac1;
				z-index: 10;
				background-color: #bfa;
				opacity: .5;
			}
			
			.nav a.active {
				background-color: black;
				background-clip: content-box;
				border-color: transparent;
			}
			
			.nav a:not(:last-child) {
				margin-right: 15px;
			}
			
			
		
		</style>
		
		
		<script>
		
			// 自定义兼容所有浏览器获取元素样式的方法
			function getStyle(obj, name) {      // 获取对象指定样式名对应的样式值
				return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
			}
			
			// 封装移动方法
			// obj：要执行动画的对象
			// attr：要执行动画的样式
			// target：执行动画的目标位置
			// speed：移动的速度
			// callback：回调函数
			function move(obj, attr, target, speed, callback) {
			    
				clearInterval(obj.timer);                     // 如果前面已经存在了定时器，先把它清除掉
			    
				var current = parseInt(getStyle(obj, attr));  // 获取样式值, 转为整数
			    
				speed = target < current ? -speed : speed;    // 根据obj对象的当前值和目标值，来判断方向
			    
				obj.timer = setInterval(function() {          // 将定时器的标识，添加给obj的新增属性timer中
			        
					var oldValue = parseInt(getStyle(obj, attr));
			        
					var newValue = oldValue + speed;
			        
			                                                  // 防止obj的值超出目标值，
			                                                  // 当计算到obj的下一个值将超过目标值时，直接设置为目标值
					newValue = speed > 0 ? (newValue > target ? target : newValue) 
			                             : (newValue < target ? target :newValue);
			        
					obj.style[attr] = newValue + "px";
			        
					if (newValue == target) {
			            
						clearInterval(obj.timer);             // 当达到目标值时，即停止该定时器
			            
						callback && callback();               // 如果传入了回调函数，在达到目标值后，执行该回调函数
					}
				}, 50);
			}
			
			var currIdx = 0
			
			window.onload = function(){
				var picList = document.getElementsByClassName('pic-list')[0]
				var lis = picList.getElementsByTagName('li')
				
				picList.style.width = 500 * lis.length + (lis.length -1) * 10 + 'px'
				
				var nav = document.getElementsByClassName('nav')[0];
				
				var allA = nav.getElementsByTagName('a')
				
				function setAactive(){
					for (var i = 0; i < allA.length; i++) {
						allA[i].className = allA[i].className.replace('active','')
					}
					allA[currIdx==allA.length?0:currIdx].className = 'active'
				}
				
				for (var i = 0; i < allA.length; i++) {
					allA[i].index = i
					allA[i].onclick = function(){
						/**
						  0 10px          -510
						  1 -500px        -510
						  2 -1010px       -510
						  3 -1520px       -510
						  3 -2030px       -510
						 */
						clearInterval(timer)
						currIdx = this.index
						move(picList,'left',10 - 510 * currIdx,50,
							function(){
								setAactive();
								autoScroll()
							}
						)
						
					}
				}
				
				var timer ;
				
				function autoScroll(){
					timer = setInterval(function(){
						
						if(currIdx == allA.length) {
							currIdx = 0
							picList.style.left = '10px'
						}
						currIdx++
						move(picList,'left',10 - 510 * currIdx,50,function(){
							setAactive()
						})
						 
						
					},2000)
				}
				autoScroll()
				
				
				
			}
		</script>
	</head>
	<body>
		<div class="outer">
			<ul class="pic-list">
				<li><img src="./img/1.jpg"></li>
				<li><img src="./img/2.jpg"></li>
				<li><img src="./img/3.jpg"></li>
				<li><img src="./img/4.jpg"></li>
				<li><img src="./img/5.jpg"></li>
				<li><img src="./img/1.jpg"></li>
			</ul>
			<div class="nav">
				<a href="javascript:;" class="active" ></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/120866