<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" οnmοuseοver="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>