用jQuery实现简单的图片轮播效果

用jQuery实现简单的图片轮播效果

以下代码使用了jQuery来实现简单的图片轮播效果:

html部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="slider">
<ul class="slider_list">
<li><a href="#"><img src="4.jpg"></a></li>
<li><a href="#"><img src="5.jpg"></a></li>
<li><a href="#"><img src="6.jpg"></a></li>
<li><a href="#"><img src="7.jpeg"></a></li>
<li><a href="#"><img src="8.jpg"></a></li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="javascript:;" class="arrow left">
<span class="slider_left"></span>
</a>
<a href="javascript:;" class="arrow right">
<span class="slider_right"></span>
</a>
</div>

css部分:

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
#slider{
width: 750px;
height: 450px;
margin: 10% auto;
position: relative;
border: 0px red solid
}
#slider img{
width: 750px;
height: 450px;
}
li{
list-style: none;
}
.slider_list li{
position: absolute;
display: none;
}
.slider_list li:first-child{
display: block;
}

.arrow{
display: none;
width:40px;
height: 60px;
background: rgba(0,0,0,.2);
position: absolute;
top: 50%;
margin-top: -40px;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.arrow span{
display: none;
width: 15px;
height: 15px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}

.slider_left{
margin-top:25px;
margin-left: 15px;
transform: rotate(45deg);
}
.slider_right{
margin-top:25px;
margin-left: 5px;
transform: rotate(-135deg);
}
.arrow:hover{background: #444}
#slider:hover .arrow{display:block;}
#slider:hover .arrow span{display:block;}
.slider_icon{
width: 195px;
height: 35px;
background-color:hsla(0,0%,100%,.3);
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -100px;
border-radius: 30px;
margin-bottom: 15px;
z-index: 2;
display: block;
}
.slider_icon i{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 11px;
margin-left: 11px;
margin-top: 13px;
}
.slider_icon:hover{background-color:rgba(0,0,0,.4);}
.btn{
background: #fff;
}
.btn_act{
background: #FCD705
}

js部分:

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
var count=0;
var $li=$(".slider_list>li");
var timer=setInterval("next()",4000);
function next() {
count++;
if (count==$li.length) {
count=0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon>i").eq(count).addClass('btn_act').siblings().removeClass('btn_act');
}
$(".right").click(function(){next();});
$(".left").click(function(){
count--;
if (count == -1) {
count=$li.length-1;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon>i").eq(count).addClass('btn_act').siblings().removeClass('btn_act');
})
$(".slider_icon>i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass('btn_act');
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
count=$(this).index();
})
# jQuery
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×