无缝滚动

最新推荐文章于 2023-04-27 15:57:32 发布

jingtian678

最新推荐文章于 2023-04-27 15:57:32 发布

阅读量235

点赞数

分类专栏： web大前端

本文链接：https://blog.csdn.net/jingtian678/article/details/54799898

版权

web大前端专栏收录该内容

291 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{margin: 0; padding: 0;}
#div1{width: 534px; height: 108px; margin: 100px auto; position: relative;
overflow: hidden;}
#div1 ul{position: absolute; left: 0; top: 0;}
#div1 ul li{float: left; width: 178px; height: 108px; list-style: none;}
</style>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<a href="javascript:;">加速</a>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
</div>
<script>
var speed=-2;
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
function show()
{
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{oUl.style.left=0;}
if(oUl.offsetLeft>0)
{oUl.style.left=-oUl.offsetWidth/2+'px';}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
var timer=setInterval(show,30);
oDiv.οnmοuseοver=function()
{
clearInterval(timer);
}
oDiv.οnmοuseοut=function()
{
timer=setInterval(show,30);
}
document.getElementsByTagName('a')[0].οnclick=function()
{
speed=-2;
}
document.getElementsByTagName('a')[1].οnclick=function()
{
speed=2;
}
document.getElementsByTagName('a')[2].οnclick=function()
{
if(speed>0)
speed++;
else
speed--;
}
</script>
</body>
</html>

jingtian678

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
无缝滚动

无缝滚动*{margin: 0; padding: 0;}#div1{width: 534px; height: 108px; margin: 100px auto; position: relative; overflow: hidden;}#div1 ul{position: absolute; left: 0; top: 0;}#div1 ul li{float: l
复制链接

扫一扫