<style type="text/css">
*{
margin:0;
padding: 0;
}
img{
vertical-align:top;
}
ul{
list-style: none;
}
#box{
width: 600px;
height: 200px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
overflow: hidden;
}
#box ul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
#box ul li{
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var scroll = document.getElementById("box");
var num = 0;
var timer = null;
timer = setInterval(autoPlay,5);
function autoPlay(){
num--;
num <=-1200? num=0:num;
scroll.children[0].style.left = num+"px";
}
scroll.onmouseover = function(){
clearInterval(timer);
}
scroll.onmouseout = function(){
timer = setInterval(autoPlay,5);
}
</script>
*{
margin:0;
padding: 0;
}
img{
vertical-align:top;
}
ul{
list-style: none;
}
#box{
width: 600px;
height: 200px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
overflow: hidden;
}
#box ul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
#box ul li{
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
<li><img src="images/04.jpg"/></li>
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var scroll = document.getElementById("box");
var num = 0;
var timer = null;
timer = setInterval(autoPlay,5);
function autoPlay(){
num--;
num <=-1200? num=0:num;
scroll.children[0].style.left = num+"px";
}
scroll.onmouseover = function(){
clearInterval(timer);
}
scroll.onmouseout = function(){
timer = setInterval(autoPlay,5);
}
</script>