<!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>
