常用轮播图-透明

最新推荐文章于 2022-10-05 20:56:00 发布

banbushi6620

最新推荐文章于 2022-10-05 20:56:00 发布

阅读量188

点赞数 1

原文链接：http://www.cnblogs.com/geerdan/p/6806896.html

版权

透明：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>透明轮播</title>
 6 <style>
 7 ul,ol,li{margin:0; padding:0;}
 8 li{list-style: none;}    
 9 img{display:block; border: 0;}
10 ul{ position: absolute; top: 0px; left: 0px; height: 320px;}
11 ul li{ width: 810px; position: absolute; left: 0px; top: 0px;}
12 ol li{ float: left; font-size: 30px; padding-right: 10px; cursor:pointer;}
13 div{width:810px; height:320px;  position: relative;}
14 div ol{ position: absolute; bottom: 0px; right: 0px;}
15 .active{ color: red;}    
16 </style>
17 
18 </head>
19 <body>
20 <div>
21     <ul>
22         <li><img src="img/001.jpg" /></li>
23         <li><img src="img/002.jpg" /></li>
24         <li><img src="img/003.jpg" /></li>
25         <li><img src="img/004.jpg" /></li>
26     </ul>
27     <ol>
28         <li class="active">●</li>
29         <li>●</li>
30         <li>●</li>
31         <li>●</li>
32     </ol>
33 </div>
34 <script src="startMove.js"></script>
35 <script>
36     var box = document.getElementsByTagName('div')[0];
37     var ul = document.getElementsByTagName('ul')[0];
38     var li = ul.getElementsByTagName('li');
39     var liArr = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
40     var now = 0;
41     var timer = setInterval(next,2000);
42     box.onmouseover = function () {
43         clearInterval(timer);
44     }
45     box.onmouseout = function () {
46         timer = setInterval(next,2000);
47     }
48     for(var i=liArr.length-1;i>=0;i--){
49         liArr[i].index = i;
50         liArr[i].onclick = next;
51     }
52 
53     function tab(){
54         for(var i=0; i<liArr.length; i++){
55             if(i==now){
56                 liArr[i].className='active';
57                 startMove(li[i],{opacity:100});
58             }else{
59                 liArr[i].className='';
60                 startMove(li[i],{opacity:0});
61             }
62         }
63     }
64 
65    function next(){
66     now++;
67 
68     if(now==liArr.length)now=0;
69     tab();
70     }
71     var timer=setInterval(next, 3000);
72     box.οnmοuseοver=function(){
73         clearInterval(timer);
74     }
75     box.οnmοuseοut=function(){
76         timer=setInterval(next, 3000);
77 
78     }
79 
80 </script>
81 </body>
82 </html>