<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} #show-box{width: 600px;height: 300px;border: 5px solid #ccc;margin: 50px auto 0;position: relative;overflow: hidden;} #big{width: 600px;height: 300px;position: absolute;left: 0;top: 0;} #big li{width: 600px;height: 300px;list-style-type: none;} .no1{background-color: #0099FF} .no2{background-color: #00CCFF} .no3{background-color: #00FFFF} .no4{background-color: #00FF33} .no5{background-color: #FF99CC} #small{position: absolute;left: 50px;bottom: 20px;z-index: 2;} #small li{display: block;width: 20px;height: 20px;line-height: 20px;border: 1px solid orange;margin-right: 10px;text-align: center;color: #000000;cursor: pointer;float: left;} #small li.active{background-color: orange;color: #ffffff;font-weight: bold;} </style> <script src="http://files.cnblogs.com/baixc/move.js"></script> <script> window.onload=function() { var oBox=document.getElementById('show-box'); var oBig=document.getElementById('big'); var aBig=oBig.getElementsByTagName('li'); var _height=aBig[0].offsetHeight; //获取li的高度 var oSmall=document.getElementById('small'); var aSmall=oSmall.getElementsByTagName('li'); var iNow=0; var iNow2=0; var timer=null; for(var i=0;i<aSmall.length;i++){ aSmall[i].index=i; aSmall[i].onmouseover=function(){ for(var i=0;i<aSmall.length;i++){ aSmall[i].className=''; } this.className='active'; iNow=this.index; //更新iNow iNow2=this.index; startMove(oBig,{top:-(this.index*_height)}); }; } timer=setInterval(aotoRun,2000); //鼠标移入清除定时器 oBox.onmouseover=function(){ clearInterval(timer); }; //鼠标移除开启定时器 oBox.onmouseout=function(){ timer=setInterval(aotoRun,2000); }; //自动播放 function aotoRun(){ //循环之后取消定位重置iNow2 if(iNow==0) { aBig[0].style.position='static'; oBig.style.top='0'; iNow2=0; } if(iNow == aBig.length-1){ iNow=0; aBig[0].style.position='relative'; //设置第一个定位 aBig[0].style.top=aBig.length*_height+'px'; } else{ iNow++; } iNow2++; for(var i=0;i<aSmall.length;i++){ aSmall[i].className=''; } aSmall[iNow].className='active'; startMove(oBig,{top:-(iNow2*_height)}); }; }; </script> </head> <body> <div id="show-box"> <ul id="big"> <li class="no1">1</li> <li class="no2">2</li> <li class="no3">3</li> <li class="no4">4</li> <li class="no5">5</li> </ul> <ol id="small"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>