<!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 type="text/css"> *{ margin:0px; padding:0px;} #container{ width:500px; height:300px; /*border:1px solid black;*/ position:relative; overflow:hidden} .btn{ height:100%; width:30px; /*border:1px solid red;*/ position:absolute; text-align:center; line-height:300px; font-size:40px; font-weight:900; color:red; opacity:0.3; transition:0.6s; z-index:999; background-color:#C6F;} .btn:hover{ cursor:pointer; opacity:0.8;} #left-btn{ left:0px; top:0px;} #right-btn{ right:0px; top:0px;} #ad-container{ width:2500px; height:300px; /*border:1px soid blue;*/ position:relative;} .ad{ width:500px; height:300px; float:left; text-align:center; line-height:300px; font-size:100px; font-family:"微软雅黑";} </style> </head> <body> <div id="container"> <div class="btn" id="left-btn"><</div> <div class="btn" id="right-btn">></div> <div id="ad-container"> <div class="ad" style="background-color:#0F6">1</div> <div class="ad" style="background-color:#09F">2</div> <div class="ad" style="background-color:#C99">3</div> <div class="ad" style="background-color:#606">4</div> <div class="ad" style="background-color:#C00">5</div> </div> </div> </body> </html> <script type="text/javascript"> var rightBtn=document.getElementById("right-btn"); var leftBtn=document.getElementById("left-btn"); var n=1; var m=1; var arr=new Array(); rightBtn.onclick=function(){ var x=window.setInterval("to_right()",20); arr.push(x); } function clear(){ for(var i in arr){ window.clearInterval(arr[i]); } } function to_right(){ var adContainer=document.getElementById("ad-container"); if(n==5){ clear(); }else if(adContainer.offsetLeft != n*(-500)){ adContainer.style.marginLeft=adContainer.offsetLeft-25+"px"; }else{ n++; clear(); } } var arr2=new Array(); leftBtn.onclick=function(){ var y=window.setInterval("to_left()",20); arr.push(y); } function clear2(){ for(var i in arr){ window.clearInterval(arr[i]); } } function to_left(){ var adContainer=document.getElementById("ad-container"); if(n==1){ clear2(); }else if(adContainer.offsetLeft != (n-2)*(-500)){ adContainer.style.marginLeft=adContainer.offsetLeft+25+"px"; }else{ n--; clear2(); } } </script>