一、前言
演示地址：jQuery 图片轮播
二、主要实现代码
2.1 HTML主要代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<article id="main"> <section id="showcase"> <div id="sliders"> <div class="sliders"> <div class="slider slider1"></div> <div class="slider slider2"></div> <div class="slider slider3"></div> <div class="slider slider4"></div> </div> <ul class="switch"></ul> </div> <div id="headline"> <h1>磨砺 聚变</h1> <p>没有伞的孩子，必须努力奔跑。</p> </div> </section> </article> |
2.2 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
|
#main{ height: 100%; width: 100%; } #showcase{ height: 100%; position: relative; width: 100%; } #sliders,.slider{ height: 100%; position: absolute; width: 100%; } .slider{ background-size: cover; display: none; } .slider1{ background-image: url(../images/slider1.jpg); display: block; } .slider2{ background-image: url(../images/slider2.jpg); } .slider3{ background-image: url(../images/slider3.jpg); } .slider4{ background-image: url(../images/slider4.jpg); } .switch{ bottom: 20px; left: 50%; position: absolute; } .switch li{ float: left; margin: 0 6px; } .switch li a{ border: 1px solid #fff; border-radius: 50%; float: left; height: 11px; width: 11px; } a.current{ background: #fff; } #headline{ color: #fff; margin-top: -60px; position: absolute; text-align: center; top: 50%; width: 100%; } #headline h1{ font-size: 4em; font-weight: normal; letter-spacing: 1px; } #headline p{ font-size: 1.5em; margin: 16px 0; } |
2.3 jQuery代码
|
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
|
$(document).ready(function(){ $("#showmenu").click(function(){ $("#menu").toggle("slow",function(){ $("#showmenu").toggleClass("changemenu"); }); }); $("#bsearch").on("click",function(){ $("#search").slideToggle(1000); }); var oSln = $("#sliders"), oSlw = $("#sliders .sliders").children(), oBul = oSln.children(".switch"), oSli = oSlw.length, i = 0; oSlw.each(function(){ $(".switch").append('<li data-index="'+i+'"><a></a></li>').css("marginLeft",-oBul.width()/2); i++; }); function slider(){ oSlw.eq(i).fadeOut(1500); i >= oSli-1 ? i = 0 : i++; oSlw.eq(i).fadeIn(1500); oBul.children().eq(i).children("a").addClass("current").end().siblings().children("a").removeClass("current"); } n = setInterval(slider,6000); oBul.on("click","li",function(){ var oswi = parseInt($(this).attr("data-index")); oSlw.eq(oswi).fadeIn().siblings().fadeOut(); oBul.children().eq(oswi).children("a").addClass("current").end().siblings().children("a").removeClass("current"); clearInterval(n); i = oswi; n = setInterval(slider,6000); }); }); |
图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。
2条评论
好厉害哦！！！
第一帧索引应该是 1。如果是 0 的话，第一帧执行时间就加倍了。