实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
.show{
border:5px solid #c1c1c1;
margin:100px auto;
width:500px;
height: 200px;
overflow: hidden;
}
.box{
width:400%;
position: relative;
cursor: pointer;;
}
ul{
list-style-type: none;;
}
.box ul li{
float:left;
display: block;
}
</style>
<script>
window.οnlοad=function(){
function $(id){
return document.getElementById(id);
}
var num=0;
function autoplay(){
num--;
$("box").style.left=num+"px";
if(num==-1200){
num=0;
}
}
var int=setInterval(autoplay,30);
$("box").οnmοuseοver=function(){
clearInterval(int);
}
$("box").οnmοuseοut=function(){
int=setInterval(autoplay,30);
}
}
</script>
</head>
<body>
<div class="show">
<div class="box" id="box">
<ul>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
<li><img src="image/03.jpg" alt=""/></li>
<li><img src="image/04.jpg" alt=""/></li>
<li><img src="image/01.jpg" alt=""/></li>
<li><img src="image/02.jpg" alt=""/></li>
</ul>
</div>
</div>
</body>
</html>
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
