js常用特效-幻灯片
2021-06-30 15:06
标签：otto 单击 ++ charset nbsp hang padding his class js常用特效-幻灯片 标签：otto 单击 ++ charset nbsp hang padding his class 原文地址：http://www.cnblogs.com/web-wjg/p/7136276.html 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">>
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 }
下一篇：C#数据类型