图片轮播是很多站点的一个需求，实现图片轮播效果的方法有多种
方法一：(淡入式)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript" src="JS/jquery-1.11.3.js"></script>
6 <style type="text/css">
7 #banners {
8 width:1000px;
9 height:500px;
10 margin:0 auto;
11 position:relative;
12 }
13
14 .banner {
15 display:block;
16 width:1000px;
17 height:500px;
18 position:absolute;
19 }
20
21 #bars {
22 display:table;
23 margin:0 auto;
24 }
25
26 .bar {
27 display:inline-block;
28 width:40px;
29 height:6px;
30 margin:0 5px;
31 background-color:#B3B9AF;
32 }
33 </style>
34
35 <script type="text/javascript">
36 window.onload = function () {
37 $(function () {
38 var banners = document.getElementsByClassName("banner");
39 var bannersLength = banners.length;
40 var bars = document.getElementsByClassName("bar");
41 //定义一个定时循环淡入的指示器，方便后面取消定时循环淡入
42 var fade;
43
44 //依次设置banner的堆叠层次,此处"堆叠增量"为1(且从1开始堆叠)
45 for (var i = 0; i < bannersLength; i++) {
46 $(banners[i]).css("z-index", (i + 1));
47 }
48
49 //设置初始时的可见banner及其对应bar的指示色
50 for (var i = 0; i < bannersLength; i++) {
51 if (i == 0) {
52 $(banners[i]).css("display", "block");
53 $(bars[i]).css("background-color", "black");
54 } else {
55 $(banners[i]).css("display", "none");
56 }
57 }
58
59 //定时循环淡入，fadeLoop只是对定时循环淡入的封装，方便后面调用
60 function fadeLoop() {
61 fade = setInterval(function () {
62 for (var i = 0; i < bannersLength; i++) {
63 if ($(banners[i]).css("display") == "block") {
64 //使用模运算，实现周期性循环回归; fadeIndex指示要淡入的对象
65 var fadeIndex = (i + 1) % bannersLength;
66 $(banners[fadeIndex]).fadeIn(3000);
67
68 //设置已淡入对象的可见性
69 $(banners[fadeIndex]).css("display", "block");
70 //设置已淡入对象对应bar的指示色
71 $(bars[fadeIndex]).css("background-color", "black");
72
73 for (var j = 0; j < bannersLength; j++) {
74 //设置未淡入对象的可见性及其对应bar的指示色
75 if (j != fadeIndex) {
76 $(banners[j]).css("display", "none");
77 $(bars[j]).css("background-color", "#B3B9AF");
78 }
79 }
80
81 //一旦for循环里的if条件得到满足，则使用break语句结束循环(也将结束包裹for循环的匿名函数)
82 break;
83 }
84 }
85 }, 3000);//每3秒后执行一次淡入
86 }
87
88 $(‘.banner‘).hover(
89 //鼠标移入banner时取消循环淡入
90 function () {
91 clearInterval(fade);
92 },
93 //鼠标移出banner时继续循环淡入
94 function () {
95 fadeLoop();
96 }
97 );
98
99 $(‘.bar‘).hover(
100 //鼠标移入bars中的某个bar时显示对应的banner图且置该bar的颜色为黑色，并取消定时循环淡入
101 function (e) {
102 $barImage = ‘#‘ + $(e.target).attr(‘id‘) + ‘Image‘;
103
104 $(‘.banner‘).hide();
105 $($barImage).fadeIn();
106
107 $(‘.bar‘).css(‘background-color‘, ‘#B3B9AF‘);
108 $(e.target).css(‘background-color‘, ‘black‘);
109
110 clearInterval(fade);
111 },
112 //鼠标移出bars中的某个bar时继续定时循环淡入
113 function () {
114 fadeLoop();
115 }
116 );
117
118 //执行循环淡入
119 fadeLoop();
120 });
121 }
122 </script>
123 </head>
124 <body>
125 <div id="section1">
126 <div id="banners">
127 <!--
128 每一个banner的id属性中的数字与其所对应的bar的id属性中的数字一致
129 (该数字由可后端生成<在HTML的id属性层面使用数字进行元素关联>)
130 -->
131 <img src="images/banner1.jpg" id="bar1Image" class="banner" />
132 <img src="images/banner2.jpg" id="bar2Image" class="banner" />
133 <img src="images/banner3.jpg" id="bar3Image" class="banner" />
134 </div>
135 <div id="bars">
136 <span id="bar1" class="bar"></span>
137 <span id="bar2" class="bar"></span>
138 <span id="bar3" class="bar"></span>
139 </div>
140 </div>
141 </body>
142 </html>
时间： 2024-10-08 10:44:14