常用轮播图-透明
透明：
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.onmouseover=function(){ 73 clearInterval(timer); 74 } 75 box.onmouseout=function(){ 76 timer=setInterval(next, 3000); 77 78 } 79 80 </script> 81 </body> 82 </html>
