- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="data.js"></script>
</head>
<body>
<div class="imgbox" id="imgbox">
<span>
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</span>
</div>
</body>
</html>
- CSS代码
.imgbox{width:940px;padding:0 20px;white-space:nowrap;overflow:hidden;}
- JavaScript代码
window.οnlοad=function(){
function scroll(){
var speed = 50;
var imgbox = document.getElementById("imgbox");
imgbox.innerHTML+=imgbox.innerHTML;
var span = imgbox.getElementsByTagName("span");
var timer = window.setInterval(star,speed)
imgbox.οnmοuseοver=function(){clearInterval(timer);}
imgbox.οnmοuseοut=function(){timer=setInterval(star,speed);}
console.log(span[0].offsetWidth);
function star(){
if(imgbox.scrollLeft>span[0].offsetWidth){
imgbox.scrollLeft=0;
}else{
++imgbox.scrollLeft;
}
}
}
scroll();
}
javascript无缝滚动实现
最新推荐文章于 2023-02-26 22:03:14 发布