首页 > 代码库 > js常用特效-幻灯片

js常用特效-幻灯片

2024-10-19 03:57:02   211人阅读

  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             }

 

js常用特效-幻灯片


联系
我们