无限滑动
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul,li,img{
margin: 0;
padding: 0;
list-style: none;
}
.all{
margin: 100px auto;
width: 500px;
height: 500px;
border: 1px solid #CCC;
background-color: red;
overflow: hidden;
}
.ad{
position: absolute;
width: 500px;
height: 500px;
list-style: none;
background-color: pink;
overflow: hidden;
cursor: pointer;
}
.ad ul{
width: 4000px;
position: absolute;
/*left: -300px;*/
list-style: none;
}
.ad ul li{
float: left;
}
.ad img{
width: 500px;
height: 500px;
}
.ad ul li.current{
display: block;
}
/*#chumo{
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 300px;
background-color: red;
}*/
</style>
</head>
<body>
<div class="all">
<div class="ad" id="pic">
<ul id="imgs">
<li id="ss"><img src="tu1.jpg"></li>
<li id="ss"><img src="tu2.jpg"></li>
<li id="ss"><img src="tu3.jpg"></li>
<li id="ss"><img src="tu4.jpg"></li>
<li id="ss"><img src="tu5.jpg"></li>
<li id="ss"><img src="tu6.jpg"></li>
<li id="ss"><img src="tu7.jpg"></li>
<li id="ss"><img src="tu8.jpg"></li>
</ul>
</div>
</div>
<div id="chumo" onmouseover="chumo()">暂停</div>
<script type="text/javascript">
function $ (id) {
return document.getElementById(id);
}
var num = 0;
var timer = null;
$("pic").onmouseover = function(){
clearInterval(timer);
// alert("我的好爸爸");
timer = setInterval(function(){
num -= 3;
num >=-3500? $("imgs").style.marginLeft = num + "px" : num=0;
},3)
}
$("pic").onmouseout = function(){
clearInterval(timer);
// alert("我的好爸爸");
timer = setInterval(function(){
num -= 3;
num >=-3500? $("imgs").style.marginLeft = num + "px" : num=0;
},3)
}
function chumo(){
clearInterval(timer);
}
</script>
</body>
</html>
