<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 840px;
height: 220px;
box-shadow: 0px 0px 20px #000;
margin:50px auto;
overflow: hidden;
border-radius: 15px;
position: relative;
}
li{
list-style: none;
}
#box ul{
position: absolute;
top: 0;
left: 0;
}
#box ul li{
width: 200px;
float: left;
margin: 0 5px;
}
</style>
<body>
<div id="box">
<ul>
<li>
<a href="#">
<img src="3.jpg" alt="" width="200" />
</a>
</li>
<li>
<a href="#">
<img src="2.jpg" alt="" width="200" />
</a>
</li>
<li>
<a href="#">
<img src="1.jpg" alt="" width="200" />
</a>
</li>
<li>
<a href="#">
<img src="0.jpg" alt="" width="200" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var ul = box.children[0];
var li = ul.children;//复制数组图片
ul.innerHTML += ul.innerHTML;
ul.style.width = li.length*li[0].offsetWidth+80+‘px‘;
setInterval(function(){
var i = ul.offsetLeft+10;
if(i>=0){
i = -ul.offsetWidth/2;
}
ul.style.left = i + ‘px‘;
}, 300);
}
</script>
</body>
</html>
时间： 2024-10-23 19:17:48