分享程序员开发的那些事...
更新时间：2022-09-15 19:24:42
基本样式：
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
|
<div class="container">
<div class="list">
<!--轮播广告图-->
<ul class="listImg clearfix" style="left:-790px;">
<li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>
<li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="图片二"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="图片三"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="图片四"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="图片五"></a></li>
<li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>
<li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>
</ul>
<!--中间的6个小按钮-->
<ul class="buttons clearfix">
<li class="active"><span index="1"></span></li>
<li><span index="2"></span></li>
<li><span index="3"></span></li>
<li><span index="4"></span></li>
<li><span index="5"></span></li>
<li><span index="6"></span></li>
</ul>
<!--左右点击按钮-->
<a href="#" class="arrow" id="prev"><</a>
<a href="#" class="arrow" id="next">></a>
</div>
</div>
|
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfix{zoom:1;}
.clearfix:after{display:block; content:''; clear: both;}
.container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}
.listImg{position:absolute; width:6320px; height:340px;}
.listImg li{float:left;}
.listImg li a img{width:100%;}
/*箭头样式*/.arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;
z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
}.arrow:hover{background:rgba(0,0,0,0.6);}
#prev{left:20px;}
#next{right:20px;}
.container:hover .arrow{display:block;} /*鼠标进入轮播图才显示两个按钮*/
/*小按钮样式*/.buttons{position:absolute; bottom:20px; left:45%; z-index:100;}
.buttons li{float:left; margin-right:10px;}
.buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}
.buttons li.active span{background:#f00;}
|
第一步：点击左右箭头实现图片左右滚动
每张图片的宽度是790px，点击左箭头时，图片向左移动，.listImg的left值会减790px；点击右箭头时，图片向右移动，.listImg的left值会加790px
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//点击左箭头$('#prev').click(function(e){
e.preventDefault();
var left = parseInt($('.listImg').css('left'))-790;
console.log(left);
$('.listImg').css('left', left);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
var left = parseInt($('.listImg').css('left'))+790;
console.log(left);
$('.listImg').css('left', left);
}); |
以上代码的重复量还是比较大的，点击左右两个箭头，一个是加790，一个是减790，所以，可以封装一个函数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//点击左箭头$('#prev').click(function(e){
e.preventDefault();
play(-790);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
play(790);
});function play(offset){
var left = parseInt($('.listImg').css('left'))+offset;
console.log(left);
$('.listImg').css('left', left);
} |
效果：
第二步：点击左右箭头无限滚动
从上例中可以看到，当 left值等于 -790px时，显示第1张图片，left值为0时，图片列表加载到第1张图片的附属图（图六“每满1000，立减100”），再次点击，left变成790px 同时没有图片显示，所以，当left大于 -790px时，要把left值变为-4740px，让图片跳到第6张
当left值等于-4740px时，图片加载到第6张图，当left值小于-4740px 时，图片列表加载到第6张图片的附属图（图一“30天包退，180天包换”），之后就出现了空白，不显示广告图。所以，当left值小于-4740px时，要把left值变成-790px，让图片跳到第1张
|
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
|
//点击左箭头$('#prev').click(function(e){
e.preventDefault();
play(-790);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
play(790);
});function play(offset){
var lists = $('.listImg');
var left = parseInt(lists.css('left'))+offset;
lists.css('left', left);
//当left值等于-790时，显示的是第一张图，点右箭头，图片右移
//再次点击时，图片加载到第一张图的附属图（图6），再点就露白了
// 所以left大于-790时，让left变成-4740（跳到第6张图）
if(left>-790){
lists.css('left',-4740);
//当left值等于-4740时，显示的是第六张图，点击左箭头，图片左移
//再次点击时，图片加载到第六张图的附属图（图一），再点就露白了
//所以left小于-4740时，让left变成-790（跳到第1张图）
}else if(left<-4740){
lists.css('left',-790);
}
} |
效果：
第三步：图片滚动时，激活对应的小圆点
获取所有的小圆点数组，点击箭头时，让数组加1或减1，对应的小圆点加上active 这个class
|
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
|
var lists = $('.listImg');
//当前播放的是哪张图片对应的小圆点var index =1;
//获取所有的小圆点var btns = $('.buttons li');
//“激活”对应的小圆点function showButton(){
//btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1
btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}//点击左箭头$('#prev').click(function(e){
e.preventDefault();
//向左时，index减1
index-=1;
showButton();
play(-790);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
//向右时，index加1
index+=1;
showButton();
play(790);
}); |
效果：
上图中有一个问题，当点击箭头超过数组最大下标时，就没有小圆点变红了，而数组最大下标是5。所以，在点箭头的时候需要对下标做一个判断，index=6，就让index=1；index=1，就让index=6 （数组的index是0到5，小圆点的index是1到6，数组的index=小圆点index-1）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//点击左箭头$('#prev').click(function(e){
e.preventDefault();
//index=1，就让index=6，否则加1
index==1?index=6:(index-=1);
showButton();
play(-790);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
//index=6，就让index=1，否则减1
index==6?index=1:(index+=1);
showButton();
play(790);
}); |
效果：
第四步：点击小圆点，切换对应的广告图
图片之所以能滚动，最主要是play方法中的 offset参数起了作用，右向滚动一张，则left值加上790px，因此，滚动三张，left值加上790px *3，反之亦然
同样的道理，当小圆点默认在第一个时，点击第3个小圆点时，要跳到第三张图片，left值就是（3-1）*790，即 (targetIndex - index)*790 （targetIndex：要点击哪个小圆点，index：当前的小圆点）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//点击小圆点，切换图片btns.click(function(){
//获取被点击的小圆点的自定义属性index的值
var targetIndex = parseInt($(this).children().attr('index'));
console.log(targetIndex);
//定义图片的偏移量
var offset = -790 * (targetIndex - index);
play(offset);
//更新当前的index
index = targetIndex;
showButton();
}); |
效果：
上图中，当重复点一个小圆点的时候，程序还在不断的获取自定义的index值，也就是说还在不断的去执行play方法，这个是完全没有必要的。
这里可以做一个判断
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//点击小圆点，切换图片btns.click(function(){
//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）
// 而被选中的小圆点都会加上一个active
if($(this).hasClass('active')){
return; //直接退出点击事件的方法
}
//获取被点击的小圆点的自定义属性index的值
var targetIndex = parseInt($(this).children().attr('index'));
console.log(targetIndex);
//定义图片的偏移量
var offset = -790 * (targetIndex - index);
play(offset);
//更新当前的index
index = targetIndex;
showButton();
}); |
效果：（反复点的时候，不再获取index为4的值，即不再重复执行其它方法）
第五步：添加动画，自动播放
页面一加载完成，图片就自动向左滑动，而向左滑动这个是可以通过点击右箭头实现的，所以我们需要定义一个启动方法，在方法里面为右箭头匹配点击事件，并触发play方法播放动画
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//间隔时间，多少毫秒播一次var interval = 3000;
var timer;
//启动动画function start() {
timer = setInterval(function () {
$('#next').trigger('click');
play();
}, interval);
}start(); |
效果：
第六步：停止动画
当鼠标进入广告图或者是点击左右箭头、小圆点的时候，动画就应该终止
|
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
|
//停止动画function stop() {
clearTimeout(timer);
}$('.container').hover(stop, start); //鼠标移入停止，移出启动
//点击左箭头$('#prev').click(function(e){
e.preventDefault();
//终止动画
if(lists.is(':animated')){
return;
}
//index=1，就让index=6，否则加1
index==1?index=6:(index-=1);
showButton();
play(-790);
});//点击右箭头$('#next').click(function(e){
e.preventDefault();
//终止动画
if(lists.is(':animated')){
return;
}
//index=6，就让index=1，否则减1
index==6?index=1:(index+=1);
showButton();
play(790);
});//点击小圆点，切换图片btns.click(function(){
//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）
// 而被选中的小圆点都会加上一个active
if($(this).hasClass('active') || lists.is(':animated')){
return; //直接退出点击事件的方法
}
//获取被点击的小圆点的自定义属性index的值
var targetIndex = parseInt($(this).children().attr('index'));
//定义图片的偏移量
var offset = -790 * (targetIndex - index);
play(offset);
//更新当前的index
index = targetIndex;
showButton();
}); |
效果：
当然，图片滑动的时候，***是能用上animate事件，有一个动画的效果，而不是直接的切换某一张图片到哪个位置上。
代码汇总：
|
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
|
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfix{zoom:1;}
.clearfix:after{display:block; content:''; clear: both;}
.container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}
.listImg{position:absolute; width:6320px; height:340px;}
.listImg li{float:left;}
.listImg li a img{width:100%;}
/*箭头样式*/
.arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;
z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
}
.arrow:hover{background:rgba(0,0,0,0.6);}
#prev{left:20px;}
#next{right:20px;}
.container:hover .arrow{display:block;} /*鼠标进入轮播图才显示两个按钮*/
/*小按钮样式*/
.buttons{position:absolute; bottom:20px; left:45%; z-index:100;}
.buttons li{float:left; margin-right:10px;}
.buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}
.buttons li.active span{background:#f00;}
</style>
</head>
<body>
<div class="container">
<div class="list">
<!--轮播广告图-->
<ul class="listImg clearfix" style="left:-790px;">
<li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>
<li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="图片二"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="图片三"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="图片四"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="图片五"></a></li>
<li><a href="#"><img src="img/6.jpg" alt="图片六"></a></li>
<li><a href="#"><img src="img/1.jpg" alt="图片一"></a></li>
</ul>
<!--中间的6个小按钮-->
<ul class="buttons clearfix">
<li class="active"><span index="1"></span></li>
<li><span index="2"></span></li>
<li><span index="3"></span></li>
<li><span index="4"></span></li>
<li><span index="5"></span></li>
<li><span index="6"></span></li>
</ul>
<!--左右点击按钮-->
<a href="#" class="arrow" id="prev"><</a>
<a href="#" class="arrow" id="next">></a>
</div>
</div>
<script src="dist/jquery-1.8.3.min.js"></script>
<script>
var lists = $('.listImg');
//获取所有的小圆点
var btns = $('.buttons li');
//当前播放的是哪张图片对应的小圆点
var index =1;
//广告图片的张数
var len = 6;
//间隔时间，多少毫秒播一次
var interval = 3000;
var timer;
//滚动图片
function play(offset){
var left = parseInt(lists.css('left'))+offset;
if (offset>0) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
lists.animate({'left':offset},500,function(){
if(left>-790){
lists.css('left', -790*len);
}else if(left< -790*len ){
lists.css('left', -790);
}
})
}
//启动动画
function start() {
timer = setInterval(function () {
$('#next').trigger('click');
play();
}, interval);
}
//停止动画
function stop() {
clearTimeout(timer);
}
//点击左箭头
$('#prev').click(function(e){
e.preventDefault();
if(lists.is(':animated')){
return;
}
//index=1，就让index=6，否则加1
index==1?index=len:(index-=1);
showButton();
play(-790);
});
//点击右箭头
$('#next').click(function(e){
e.preventDefault();
if(lists.is(':animated')){
return;
}
//index=6，就让index=1，否则减1
index==len?index=1:(index+=1);
showButton();
play(790);
});
//“激活”对应的小圆点
function showButton(){
//btns的下标从0开始,index从1到6，共6个小圆点，实际的图片下标是index-1
btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}
//点击小圆点，切换图片
btns.click(function(){
//如果被点击的小圆点已经是被选中了的那一个（简单说就是重复点一个小圆点）
// 而被选中的小圆点都会加上一个active
if($(this).hasClass('active') || lists.is(':animated')){
return; //直接退出点击事件的方法
}
//获取被点击的小圆点的自定义属性index的值
var targetIndex = parseInt($(this).children().attr('index'));
//定义图片的偏移量
var offset = -790 * (targetIndex - index);
play(offset);
//更新当前的index
index = targetIndex;
showButton();
});
$('.container').hover(stop, start); //鼠标移入停止，移出启动
start();
</script>
</body>
</html>
|
以上仅仅是闲来无事整理的一个小demo，实际使用中，也可以使用类似 Swiper、Hammer等优秀的插件
