原生javascript制作无缝滚动

最新推荐文章于 2025-06-11 12:51:21 发布

马灿发

最新推荐文章于 2025-06-11 12:51:21 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javasctipt 动画

本文链接：https://blog.youkuaiyun.com/macanfa/article/details/49685473

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的无缝滚动效果。通过复制图片列表并动态调整宽度，实现了平滑连续的滚动动画。文中提供了完整的代码示例，并通过按钮控制滚动方向。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>

<style>
*{margin:0;padding:0;}
#div1{
border:1px solid #000;position:relative;
width:650px;height:122px;
margin:10px auto;overflow:hidden;

}
#div1 ul{position:absolute;}
#div1 ul li{
list-style-type:none;
width:150px;height:112px;
float:left;
padding:5px;
}
#div1 ul li img{width:150px;}
.btn{
display: block;
width:50px;height:20px;
background:#ccc;
color:#fff;
float:left;
margin:10px;
}

</style>
<body>
<div id="div1">
<ul>
<li><img src="https://img-blog.youkuaiyun.com/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="https://img-blog.youkuaiyun.com/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="https://img-blog.youkuaiyun.com/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
<li><img src="https://img-blog.youkuaiyun.com/20151106170818010?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" ></li>
</ul>
</div>

<a href="javascript:;" class="btn" ><</a>
<a href="javascript:;" class="btn" >></a>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
var iSpeed=5;
oUl.innerHTML+=oUl.innerHTML;//复制ul的内容
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//动态设置ul的宽度
//以上顺序倒了ul还是会换行
timer=setInterval(startMove,30);
function startMove(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){//向左移动到一半时，重新设置left
oUl.style.left=0;
}else if(oUl.offsetLeft>0){//向左移动到0时，重新设置left
oUl.style.left=-oUl.offsetWidth/2+'px';
}

oUl.style.left=oUl.offsetLeft+iSpeed+'px';
}

//左右切换按钮
var aBtn=document.getElementsByTagName('a');
aBtn[0].onclick=function(){
if(iSpeed>0){iSpeed=-iSpeed;}

}
aBtn[1].onclick=function(){
if(iSpeed<0){iSpeed=-iSpeed;}
}
//移入移出动画切换
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(startMove,30);
}
}
</script>
</body>
</html>