1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style type="text/css">
8 * {
9 margin: 0px;
10 padding: 0px;
11 list-style: none;
12 }
13
14 #box {
15 position: absolute;
16 left: 0px;
17 right: 0px;
18 bottom: 0px;
19 top: 0px;
20 margin: auto;
21 width: 500px;
22 height: 300px;
23 }
24
25 ul>li {
26 width: 100%;
27 height: 100%;
28 position: absolute;
29 top: 0px;
30 left: 0px;
31 font-size: 40px;
32 color: #fff;
33 text-align: center;
34 line-height: 300px;
35 display: none;
36 }
37
38 .ul li:nth-of-type(1) {
39 background: red;
40 }
41
42 .ul li:nth-of-type(2) {
43 background: green;
44 }
45
46 .ul li:nth-of-type(3) {
47 background: blue;
48 }
49
50 .ul li:nth-of-type(4) {
51 background: #ff6700;
52 }
53
54 span {
55 font-size: 50px;
56 font-weight: bold;
57 display: inline-block;
58 width: 40px;
59 color: #fff;
60 background: #b0b0b0;
61 height: 60px;
62 line-height: 60px;
63 text-align: center;
64 cursor: pointer;
65 display: none;
66 }
67
68 #box:hover span {
69 display: block;
70 }
71
72 .left {
73 position: absolute;
74 left: 0px;
75 top: 120px;
76 }
77
78 .right {
79 position: absolute;
80 right: 0px;
81 top: 120px;
82 }
83
84 ol {
85 text-align: center;
86 position: absolute;
87 bottom: 20px;
88 width: 100%;
89 }
90
91 ol>li {
92 display: inline-block;
93 width: 15px;
94 height: 15px;
95 background: gray;
96 border-radius: 100%;
97 margin: 5px;
98 cursor: pointer;
99 }
100 .show {
101 display: block;
102 }
103 .change {
104 background-color: #fff;
105 }
106 </style>
107 </head>
108 <body>
109 <div id="box">
110 <ul class="ul">
111 <li>第一张</li>
112 <li>第二张</li>
113 <li>第三张</li>
114 <li>第四张</li>
115 </ul>
116 <ol>
117 <li class="point"></li>
118 <li class="point"></li>
119 <li class="point"></li>
120 <li class="point"></li>
121 </ol>
122 <span class="left"><</span>
123 <span class="right">></span>
124 </div>
125 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
126 <script type="text/javascript">
127 var box = document.querySelector("#box");
128 var ul = document.querySelector(".ul");
129 var lis = ul.getElementsByTagName("li");
130 var right = document.querySelector(".right");
131 var left = document.querySelector(".left");
132 var point = document.querySelectorAll(".point");
133
134 lis[0].className = "show";
135 point[0].className = "change";
136 var i = 0, timer;
137
138 //自动播放
139
140 Auto();
141 function Auto() {
142 if(timer){
143 clearInterval(timer);
144 }
145 function show() {
146 i++;
147 if(i >= lis.length) {
148 i = 0
149 }
150 clear(i);
151 }
152 timer = setInterval(show, 1500);
153 }
154
155 //单击左边
156 left.onclick = function() {
157 i--;
158 if(i < 0) {
159 i = lis.length - 1;
160 }
161 console.log(i);
162 clear(i);
163 }
164
165 //单击右边
166 right.onclick = function() {
167 i++;
168 if(i >= lis.length) {
169 i = 0;
170 }
171 clear(i);
172 }
173 //重置属性
174 function clear(t) {
175 for(var j = 0; j < lis.length; j++) {
176 lis[j].className = "";
177 point[j].className = "";
178 }
179 lis[t].className = "show";
180 point[t].className = "change";
181 }
182 //单击小圆圈播放 (注意函数的闭包问题 )
183 for(var k = 0; k < point.length; k++) {
184 point[k].index = k; //闭包问题的解决，自定义属性
185 point[k].onclick = function() {
186 i = this.index;
187 clear(i);
188 }
189 }
190
191 box.onmouseenter = function(){
192 clearInterval(timer);
193 }
194 box.onmouseleave = function(){
195 setTimeout(Auto, 1000);
196 }
时间： 2024-10-14 08:53:18