1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 .banner {
13 width: 100%;
14 height: 450px;
15 background: #999;
16 position: relative;
17 }
18
19 .cont {
20 width: 100%;
21 height: 100%;
22 line-height: 450px;
23 text-align: center;
24 display: none;
25 color: #f00;
26 }
27
28 .tip {
29 width: 120px;
30 bottom: 50px;
31 left: 50%;
32 margin-left: -60px;
33 position: absolute;
34 }
35
36 .tip ul {
37 width: 120px;
38 margin: 0 auto;
39 text-align: center;
40 }
41
42 .tip ul li {
43 margin: 0;
44 width: 20px;
45 height: 20px;
46 text-align: center;
47 line-height: 20px;
48 background: #ccc;
49 margin: 0 5px;
50 list-style: none;
51 display: inline-block;
52 }
53
54 .active {
55 color: #fff;
56 background: #f00 !important;
57 }
58
59 .pre, .next {
60 position: absolute;
61 top: 50%;
62 margin-top: -50px;
63 width: 40px;
64 height: 80px;
65 line-height: 80px;
66 text-align: center;
67 background: #ccc;
68 }
69
70 .pre {
71 left: 0;
72 }
73
74 .next {
75 right: 0;
76 }
77 </style>
78 </head>
79 <body>
80 <div class="banner" id="box">
81 <div class="main" id="main">
82 <div class="cont" style="display: block">第一张</div>
83 <div class="cont" style="background:#666">第二张</div>
84 <div class="cont" style="background:#171717">第三张</div>
85 <div class="cont" style="background:#424242">第四张</div>
86 </div>
87 <div class="tip" id="tip">
88 <ul>
89 <li class="active">1</li>
90 <li>2</li>
91 <li>3</li>
92 <li>4</li>
93 </ul>
94 </div>
95 <div class="slide">
96 <div class="pre" id="pre">左</div>
97 <div class="next" id="next">右</div>
98 </div>
99 </div>
100 </body>
101 <script>
102 window.onload = function () {
103 var oCont = document.getElementsByClassName('cont');
104 var oLi = document.getElementsByTagName('li');
105 var oPre = document.getElementById('pre');
106 var oNext = document.getElementById('next');
107
108 var index = 0;
109 var timer = '';
110
111 //左边切换
112 oPre.onclick = function () {
113 index--;
114 if (index == '-1') {
115 index = oCont.length - 1;
116 }
117 ;
118
119 for (var i = 0; i < oCont.length; i++) {
120 oLi[i].className = '';
121 oCont[i].style.display = 'none'
122 }
123 oLi[index].className = 'active';
124 oCont[index].style.display = 'block';
125 };
126
127 //右边切换
128 oNext.onclick = function () {
129
130 index++;
131 if (index == oCont.length) {
132 index = 0;
133 }
134 for (var i = 0; i < oCont.length; i++) {
135 oLi[i].className = '';
136 oCont[i].style.display = 'none'
137 }
138 oLi[index].className = 'active';
139 oCont[index].style.display = 'block';
140 };
141
142
143 //点击数字切换内容
144 for (var i = 0; i < oLi.length; i++) {
145 oLi[i].index = i;
146 oLi[i].onclick = function () {
147 for (var i = 0; i < oLi.length; i++) {
148 oLi[i].className = '';
149 oCont[i].style.display = 'none';
150 }
151 for (var i = 0; i <= this.index; i++) {
152 this.className = 'active';
153 oCont[this.index].style.display = 'block';
154 index = i;
155 }
156 }
157 }
158
159
160 timer = setInterval(move, 1500);
161
162 box.onmouseout = function () {
163 clearInterval(timer);
164 timer = setInterval(move, 1500);
165 };
166
167 box.onmouseover = function () {
168 clearInterval(timer);
169 };
170
171 function move() {
172 index++;
173 if (index == oCont.length) {
174 index = 0;
175 }
176 for (var i = 0; i < oCont.length; i++) {
177 oLi[i].className = '';
178 oCont[i].style.display = 'none'
179 }
180 oLi[index].className = 'active';
181 oCont[index].style.display = 'block';
182 }
183
184 };
185 </script>
186
187 </html>
轮播图的大致原理就是，通过JS来判断当前应该显示图片数组中的哪一张图片。
将所需要展示的图片（.cont）通过JS获取为数组，并判断用户当前点击的是分页器的哪一页，或点击的是切页按钮。
然后为当前应活跃的图片添加display:block属性，并将其他图片隐藏（display:none）。
给分页器的当前页数添加class="active"属性来标识当前活跃页码。
并最终添加循环器（setInterval）来使页面进行轮播，最终完成轮播图的效果。
注：可若添加轮播特效。
来源：https://www.cnblogs.com/moxiaoshang/p/11112019.html