<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#ads{
width: 1170px;
overflow: hidden;
position: relative;
top: 100px;
}
#ads ul{
list-style: none;
width: 2340px;
}
#ads ul li{
float: left;
}
#ads ul li img{
display: block;
border: 0;
cursor: pointer;
transition: all 1s ease 0s;
}
#ads ul li:hover img {
transform: scale(1.05);
transition: all 1s ease 0s;
}
</style>
</head>
<body>
<div id="ads">
<ul>
<li><img src="images/pi2.jpg" /></li>
<li><img src="images/pi3.jpg" /></li>
<li><img src="images/pi4.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var ads=document.getElementById("ads");
var ul=ads.childNodes[1];
var lis=ul.getElementsByTagName("li");
var len=lis.length;
for(var i=0;i<len;i++){
var newLi=lis[i].cloneNode(true);
ul.appendChild(newLi);
console.log(i);
}
function move(){
ads.scrollLeft=(ads.scrollLeft+1)%(ul.offsetWidth/2);
}
var t=setInterval(move,10);
}
</script>
</body>
</html>
简单的轮播图
最新推荐文章于 2024-08-08 12:27:38 发布