常用轮播图-上下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上下轮播</title> <style> ul,ol,li{margin:0; padding:0;} li{list-style: none;} img{display:block; border: 0;} ul{ position: absolute; top: 0px;} ol li{ float: left; font-size: 30px; padding-right: 10px; cursor:pointer;} div{width:810px; height:320px; overflow: hidden; position: relative;} div ol{ position: absolute; bottom: 0px; right: 0px;} .active{ color: red;} </style> <script src="startMove.js"></script> <script> window.onload=function(){ var div=document.getElementsByTagName('div')[0]; var ul=document.getElementsByTagName('ul')[0]; var aBtn=document.getElementsByTagName('ol')[0].getElementsByTagName('li'); var now=0; for(var i=0; i<aBtn.length; i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ now=this.index; tab(); } } function tab(){ for(var i=0; i<aBtn.length; i++){ aBtn[i].className=i==now?'active':''; } //ul.style.top=-320*now+'px'; startMove(ul,{top:-320*now}); } function next(){ now++; if(now==aBtn.length)now=0; tab(); } var timer=setInterval(next, 3000); div.onmouseover=function(){ clearInterval(timer); } div.onmouseout=function(){ timer=setInterval(next, 3000); } } </script> </head> <body> <div> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> <li><img src="img/004.jpg" /></li> </ul> <ol> <li class="active">●</li> <li>●</li> <li>●</li> <li>●</li> </ol> </div> </body> </html>