1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图</title>
6 <style>
7 #container{
8 width: 450px;
9 height: 270px;
10 margin: 0 auto;
11 margin-top: 100px;
12 position: relative;
13 overflow: hidden;
14 }
15
16 #pic{
17 width: 3150px;
18 height: 270px;
19 position: absolute;
20 z-index: 1;
21 }
22 /*图片大小*/
23 #pic img{
24 float: left;
25 width: 450px;
26 height: 270px;
27 }
28
29 #pre{
30 width: 37px;
31 height: 63px;
32 background: url(../img/L1.png);
33 position: absolute;
34 top: 120px;
35 left: 5px;
36 cursor: pointer;
37 z-index: 10;
38 }
39
40 #pre:hover{
41 background: url(../img/L2.png);
42 }
43
44 #next{
45 width: 37px;
46 height: 63px;
47 background: url(../img/R1.png);
48 position: absolute;
49 top: 120px;
50 right: 5px;
51 cursor: pointer;
52 z-index: 10;
53 }
54
55 #next:hover{
56 background: url(../img/R2.png);
57 }
58
59 #circle .first{
60 background-color: darkgrey;
61 }
62
63 #circle{
64 position: absolute;
65 top: 240px;
66 left: 130px;
67 z-index: 10;
68 height: 40px;
69 z-index: 2;
70 }
71
72 #circle span{
73 display: inline-block;
74 width: 20px;
75 height: 20px;
76 border-radius: 10px;
77 background-color: white;
78 margin-left: 8px;
79 }
80 </style>
81 </head>
82 <body>
83 <div id="container">
84 <div id="pic">
85 <img src="img/1.jpg" alt=""/>
86 <img src="img/2.jpg" alt=""/>
87 <img src="img/3.jpg" alt="3"/>
88 <img src="img/4.jpg" alt=""/>
89 <img src="img/5.jpg" alt=""/>
90 <img src="img/6.jpg" alt=""/>
91 <img src="img/7.jpg" alt=""/>
92 </div>
93 <div id="pre"></div>
94 <div id="next"></div>
95 <div id="circle">
96 <span class="first"></span>
97 <span></span>
98 <span></span>
99 <span></span>
100 <span></span>
101 <span></span>
102 <span></span>
103 </div>
104 </div>
105
106 <script>
107 //索引值：控制全局
108 var index = 0;
109 var pic = document.getElementById("pic");
110 var pre = document.getElementById("pre");
111 var next = document.getElementById("next");
112
113 ////切换下一张图片
114 function next_pic () {
115 index++;
116 if(index == 7){
117 index = 0;
118 }
119 pic.style.left = -450*index + "px";
120 showCurrentCircle();
121 }
122
123 //切换上一张图片
124 function pre_pic () {
125 index--;
126 if(index == -1){
127 index = 6;
128 }
129 pic.style.left = -450*index + "px";
130 showCurrentCircle();
131 }
132
133 //点击下一张照片的事件
134 next.onclick = function () {
135 next_pic();
136 }
137
138 //点击上一张照片的事件
139 pre.onclick = function () {
140 pre_pic();
141 }
142
143 var timer = null;
144 //无限计时器，自动循环播放照片
145 function autoPlay () {
146 timer = setInterval(function () {
147 //调用
148 next_pic();
149 },2000);
150 }
151 //调用
152 autoPlay();
153
154 var container = document.getElementById("container");
155 //鼠标移入图片范围，移除计时器，图片自动轮播停止
156 container.onmouseenter = function () {
157 clearInterval(timer);
158 }
159 ////鼠标离开图片范围，计时器重启，图片自动轮播
160 container.onmouseleave = function () {
161 autoPlay();
162 }
163
164 var circle = document.getElementsByTagName("span");
165 //下方原点颜色跟随图片切换
166 function showCurrentCircle () {
167 //清除已经轮播过的圆点类
168 for(var i = 0; i < circle.length; i++){
169 circle[i].className = "";
170 console.log(i)
171 }
172 //再将原本的圆点类名赋给当前所轮播到的圆点
173 circle[index].className = "first";
174 }
175
176 //let:类似闭包效果，
177 for (let i = 0; i < circle.length; i++){178 circle[i].onclick = function () {
179 pic.style.left = -450*i + "px";
180 index = i;
181 showCurrentCircle();
182 }
183 }
184 </script>
185 </body>
186 </html>
效果图如上：
原文地址：https://www.cnblogs.com/wcx-20151115-hzz/p/10098483.html
时间： 2024-10-13 08:17:43