<!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;overflow: hidden;position: relative;} #big{width: 600px;height: 300px;position: relative;} #big li{width: 600px;height: 300px;list-style-type: none;position: absolute;top: 0;} .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 _width=aBig[0].offsetWidth; //获取li的高度 var oSmall=document.getElementById('small'); var aSmall=oSmall.getElementsByTagName('li'); var iNow=0; var bBtn=true; //定位除第一个之外的li在右边 for (var i = 1; i < aBig.length; i++) { aBig[i].style.left=_width+'px'; }; for(var i=0;i<aSmall.length;i++){ aSmall[i].index=i; aSmall[i].onmouseover=function(){ if(bBtn) { bBtn = false; for (var i = 0; i < aSmall.length; i++) { aSmall[i].className=''; }; this.className='active'; if(iNow < this.index) { aBig[this.index].style.left=_width+'px'; startMove(aBig[iNow],{left:-_width}); } else if(iNow > this.index) { aBig[this.index].style.left=-_width+'px'; startMove(aBig[iNow],{left:_width}); } startMove(aBig[this.index],{left:0},function(){ bBtn=true; }); iNow=this.index; } }; } }; </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>