<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0 ;padding:0;} #div1{width:520px; height:280px; position:relative; overflow:hidden; margin:50px auto;} #ul1{position:absolute; left:0; top:0; } #ul1 li{float:left; list-style:none; width:520px; height:280px;} #span1{z-index:3;position:absolute; text-align:center;} #span1 span{display:block; width:20px; height:20px;background:blue; color:white; margin:6px;} </style> </head> <body> <div id="div1"> <ul id="ul1"> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> <li><img src="4.jpg" /></li> </ul> <div id="span1"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div> <span id="prev">上张</span> <span id="next">下账</span> <script> window.onload=function(){ var oPrev=document.getElementById('prev'); var oNext=document.getElementById('next'); var oUl=document.getElementById('ul1'); var oDiv=document.getElementById('div1'); var oSpanBox=document.getElementById('span1'); var oSpan=oSpanBox.getElementsByTagName('span'); var oLi=oUl.getElementsByTagName('li'); var oP=true; oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; function al(){oP=!oP} for(var i=0; i<oLi.length;i++){ oSpan[i].index=i; oSpan[i].onclick=function(){ startMove(oUl,{'left':oLi[0].offsetWidth*this.index*-1}) } } oPrev.onclick=function(){ if(oUl.offsetLeft<0 && oP){ oP=!oP; //开关，防止连续点击错误 startMove(oUl,{'left':oUl.offsetLeft+oLi[0].offsetWidth},al); }else{ return false; } } oNext.onclick=function(){ if(oUl.offsetLeft>-oLi[0].offsetWidth*(oLi.length)&&oP){ oP=!oP; startMove(oUl,{'left':oUl.offsetLeft-oLi[0].offsetWidth},al) }else{ return false; } } } </script> <script src="move.js"></script> </body> </html>