原生JS实现走马灯效果

最新推荐文章于 2024-08-18 19:59:30 发布

码农的N次方

最新推荐文章于 2024-08-18 19:59:30 发布

阅读量5.8k

点赞数 1

分类专栏： web前端，ES5 文章标签： dom html javascript

本文链接：https://blog.csdn.net/qq_38384536/article/details/73194344

版权

web前端，ES5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0;}
#div1,#div2{ width:630px; height:260px; border:2px solid red; margin:100px auto; overflow:hidden}
ul{ position:relative; left:0; top:0; list-style:none}
li{ float:left;}
</style>
</head>

<body>
<div id="div1">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>
<div id="div2">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</div>

</body>
</html>
<script>
function marquee(box_id,speed){//传id speed 速度

var oDiv=document.getElementById(box_id);

//ul填充图片
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oDiv.getElementsByTagName('li');

var timer;
var i=0;//定时器用的计时器

var w=400*aLi.length; //一套图片的宽度，注意本例中每个图片的宽度为400px

oUl.innerHTML+=oUl.innerHTML;//复制一套图片

oUl.style.width=w*2+"px";
//-------------------------------------------------

//重复代码封装函数
function run(){
timer=setInterval(function(){
i-=speed;//计时器步进
oUl.style.left=i+"px";

if(i<=-w){//如果移动过一套图片的宽度，归零
i=0;
};
},30);
};

//首次调用
run();

//----------------------------------------------

//鼠标进入停止
oDiv.οnmοuseοver=function(){
clearInterval(timer);
};

//鼠标移出继续
oDiv.οnmοuseοut=function(){
run();
};

};

//------------------------------------------------------
marquee("div1",20);
marquee("div2",10);

</script>