js，自动播放示例 
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{
  8                 margin:0;
  9                 padding:0;
 10             }
 11             li{
 12                 list-style: none;
 13             }
 14             img{
 15                 vertical-align: top;
 16                 background-size: 100% 100%;
 17             }
 18             #wrap{
 19                 margin: 100px auto;
 20                 width: 380px;
 21                 height: 400px;
 22                 position: relative;
 23             }
 24             #box{
 25                 width: 380px;
 26                 height:100px;
 27                 overflow: hidden;
 28                 position: absolute;
 29             }
 30             #list{
 31                 width: 380px;
 32                 height: 300px;
 33                 position: relative;
 34             }
 35             #list .pic1{
 36                 width: 380px;
 37                 height: 300px;
 38                 overflow: hidden;
 39                 position: absolute;
 40             }
 41             #list .pic1_a{
 42                 width: 380px;
 43                 height: 300px;
 44             }
 45             #list2{
 46                 width: 380px;
 47                 height:100px;
 48                 position: absolute;
 49             }
 50             #list2 .pic2{
 51                 width: 120px;
 52                 height: 90px;
 53                 float:left;
 54                 opacity: 0.6;
 55                 border: 5px solid #CCCCCC;
 57             } 61             #list2 .active{
 62                 margin-left: -5px;
 63             }
 64             #list2 .pic2_a{
 65                 width: 120px;
 66                 height: 90px;
 67                 text-align: center;
 68             }
 69             .left ,.right{
 70                 width: 190px;
 71                 height: 300px;
 72                 position: absolute;
 73                 background: red;
 74                 z-index: 998;
 75                 opacity: 0;
 76                 top: 0;
 77             }
 78             .left{
 79                 left: 0px;
 80                 background: red;
 81             }
 82             .right{
 83                 right: 0px;
 84                 background: green;
 85             }
 86             .next,.prve{
 87                 width: 50px;
 88                 height: 50px;
 89                 position: absolute;
 90                 top:150px;
 91                 z-index:999;
 92                 opacity: 0;
 93                 
 94             }
 95             .next{
 96                 background: url(img6/2.png);
 97                 background-size: 100% 100%;
 98                 right:10px;
 99             }
100             .prve{
101                 left:10px;
102                 background:url(img6/1.png);
103                 background-size: 100% 100%;
104             }
105             #texts{
106                 height: 30px;
107                 width:380px;
108                 background: rgb(0,0,0,0.5);
109                 position: absolute;
110                 top: 270px;
111                 color: #FFFFFF;
112                 z-index: 997;
113                 font-size: 12px;
114             }
115              .textRight,.textLeft{
116                 width: 186px;
117                 padding: 0 2px;
118                 line-height: 30px;
119                 opacity: 1;
120             }
121             #texts .textRight{
122                 text-indent: 70px;
123                 float: right;
124             }
125             .textLeft{
126                 text-indent: 10px;
127                 float: left;
128             }
129         </style>
130     </head>
131     <body>
132         <div id="wrap">
133             <div class="left"></div>
134             <div class="right"></div>
135             <div class="prve"></div>
136             <div class="next"></div>
137             <p id="texts">
138                 <span class="textLeft">文字加载中......</span>
139                 <span class="textRight">数量加载中......</span>
140             </p>
141             <ul id="list">
142                 <li class="pic1" style="z-index: 1;"><img class="pic1_a"  src="img2/1.png"/></li>
143                 <li class="pic1"><img class="pic1_a"  src="img2/2.png"/></li>
144                 <li class="pic1"><img class="pic1_a"  src="img2/3.png"/></li>
145                 <li class="pic1"><img class="pic1_a"  src="img2/4.png"/></li>
146                 <li class="pic1"><img class="pic1_a"  src="img4/1.jpg"/></li>
147                 <li class="pic1"><img class="pic1_a"  src="img4/2.jpg"/></li>
148             </ul>
149             <div id="box">
150                 <ul id="list2">
151                     <li class="pic2"><img class="pic2_a"  src="img2/1.png"/></li>
152                     <li class="pic2 active"><img class="pic2_a"  src="img2/2.png"/></li>
153                     <li class="pic2 active"><img class="pic2_a"  src="img2/3.png"/></li>
154                     <li class="pic2"><img class="pic2_a"  src="img2/4.png"/></li>
155                     <li class="pic2"><img class="pic2_a"  src="img4/1.jpg"/></li>
156                     <li class="pic2"><img class="pic2_a"  src="img4/2.jpg"/></li>
157                 </ul>
158             </div>
159         </div>
160         
161         <script type="text/javascript" src="js/move.js" ></script>
162         <script>
163             window.onload = function(){
164                 var left = document.getElementsByClassName("left")[0];
165                 var right = document.getElementsByClassName("right")[0];
166                 var prve = document.getElementsByClassName("prve")[0];
167                 var next = document.getElementsByClassName("next")[0];
168                 var list = document.getElementById("list");
169                 var aLi1 = list.getElementsByClassName("pic1"); 
170                 var list2 = document.getElementById("list2");
171                 var aLi2 = list2.getElementsByClassName("pic2"); 
172                 var texts = document.getElementById("texts");
173                 var aSpan = texts.getElementsByTagName("span");
174                 var arrPic = ["老鹰","女魔","女神","机器人","书本","小鸟"]
175                 var iNow = 0;
176                 var iZindex = 6;
177                 var timer = null;
178                 autoPlay();
179                 //根据小图li个数动态设置ul宽度
180                 list2.style.width = aLi2.length*aLi2[0].offsetWidth+'px';
181                 //上一张与下一张 鼠标移入移出的透明度变化
182                 prve.onmouseover = left.onmouseover = function(){
183                     startMove(prve,'opacity',100);
184                     clearInterval(timer);            
185                 }
186                 prve.onmouseout = left.onmouseout = function(){
187                     startMove(prve,'opacity',0);
188                     autoPlay();
189                 }            
190                 next.onmouseover = right.onmouseover = function(){
191                     startMove(next,'opacity',100);
192                     clearInterval(timer);
193                 }
194                 next.onmouseout = right.onmouseout = function(){
195                     startMove(next,'opacity',0);
196                     autoPlay();
197                 }
198                 //小图的点击切换与透明度变化
199                 for (var i=0; i<aLi2.length;i++) {
200                     aLi2[i].index = i;
201                     aLi2[i].onmouseover = function(){
202                         clearInterval(timer);
203                         startMove(this,'opacity',100);
204                     }
205                     aLi2[i].onmouseout = function(){
206                         if (this.index != iNow) {
207                             startMove(this,'opacity',60);
208                         }
209                         autoPlay();
210                     }                
211                     aLi2[i].onclick = function(){
212                         clearInterval(timer);
213                         if(iNow == this.index){
214                             return;
215                         }
216                         iNow = this.index;
217                         tab(iNow);
218                         aSpan[0].innerHTML = arrPic[iNow];
219                         aSpan[1].innerHTML = iNow+1 +'/' + aLi2.length;
220                     }
221                     prve.onclick = function(){
222                         clearInterval(timer);
223                         iNow--;
224                         if (iNow == -1) {
225                             iNow = aLi2.length-1;
226                         } 
227                         tab(iNow);
228                         aSpan[0].innerHTML = arrPic[iNow];
229                         aSpan[1].style.textIndent = '150px';
230                         aSpan[1].innerHTML = iNow+1 +'/' + aLi2.length;
231                     }
232                     next.onclick = function(){
233                         clearInterval(timer);
234                         iNow++;
235                         if (iNow == aLi2.length) {
236                             iNow = 0
237                         } 
238                         tab(iNow);
239                         aSpan[0].innerHTML = arrPic[iNow];
240                         aSpan[1].style.textIndent = '150px';
241                         aSpan[1].innerHTML = iNow+1 +'/' + aLi2.length;
242                     }
243                     //将小图与大图关联，封装成函数。
244                     function tab(iNow){
245                         for (var i=0; i<aLi2.length;i++) {
246                             startMove(aLi2[i],'opacity',60);
247                         }
248                         startMove(aLi2[iNow],'opacity',100);
249                         aLi1[iNow].style.zIndex = iZindex++;
250                         aLi1[iNow].style.height = 0;
251                         
252                         startMove(aLi1[iNow],'height',list.offsetHeight);
253                         if (iNow == 0 ) {
254                             startMove(list2,'left',0);
255                         }else{
256                             if (iNow == aLi2.length-1 ) {
257                                 startMove(list2,'left',-(iNow-2 )*aLi2[0].offsetWidth);
258                             }else{
259                                 startMove(list2,'left',-(iNow-1)*aLi2[0].offsetWidth);
260                             }
261                         }
262                     }
263                 }
264                 //自动播放封装函数。
265                 function autoPlay(){
266                     timer = setInterval(function(){
267                         tab(iNow);
268                         aSpan[0].innerHTML = arrPic[iNow];
269                         aSpan[1].style.textIndent = '150px';
270                         aSpan[1].innerHTML = iNow+1 +'/' + aLi2.length;
271                         iNow++;
272                         if (iNow == aLi2.length) {
273                             iNow = 0;
274                         }
275                     },1000)
276                 }
277             }
278         </script>
279     </body>
280 </html>

 

 posted on 2017-05-07 10:55  my_summer  阅读(208)  评论(0)  编辑  收藏  举报