<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.sever5{
width: 1000px;
height: 250px;
margin-top:20px;
border:1px solid red;
position:relative;
}
#severin li{border:1px solid red;text-align:center;
float:left; width:198px;height:186px; margin-left:20px;margin-top:10px
}
#severin{ margin:0; padding:0; width:1130px; height:200px;border:1px solid gray;list-style:none; margin-top:10px;position:absolute}
#severin img:{ width:209px;
height:160px;}
#severin2 li{border:1px solid red;text-align:center;
float:left; width:198px;height:186px; margin-left:20px;margin-top:10px
}
#severin2{ margin:0; padding:0; width:1130px; height:200px;border:1px solid gray;list-style:none; margin-top:10px;position:absolute;left:1000px;}
#severin2 img:{ width:209px;
height:160px;}
</style>
</head>
<body>
<div class="sever5" id="sever5">
<img src="img/hj.png"><a href="#">更多</a>
<ul id="severin">
<li>
<div class="sever51">
<img src="img/111.jpg">
<span>小桥流水</span>
</div>
</li>
<li>
<div class="sever52">
<img src="img/222.jpg">
<span>驾校班车</span>
</div>
</li>
<li>
<div class="sever53">
<img src="img/333.jpg">
<span>训练场</span>
</div>
</li>
<li>
<div class="sever54">
<img src="img/444.jpg">
<span>京海教学楼</span>
</div>
</li>
<li>
<div class="sever55">
<img src="img/667.jpg">
<span>海淀驾校办公楼</span>
</div>
</li>
</ul>
<ul id="severin2"></ul>
</div><!--sever5-->
</body>
<script>
var sever=document.getElementById("sever5");
var severy=document.getElementById("severin");
var severx=document.getElementById("severin2");
function aa(){
var ss=parseInt(severy.style.left);
var tt=parseInt(severx.style.left)
//alert(severx.innerHTML)
// alert(ss);
severy.style.left=severy.offsetLeft-3+"px";
if(ss<-136){
severx.innerHTML=severy.innerHTML;
severx.style.left=severx.offsetLeft-3+"px"
}
if(tt<-136){
severy.style.left=1000+"px";
severx.style.left=severx.offsetLeft-3+"px";
}
}
var tim=setInterval(aa,25)
</script>
</html>
相关分类