原生JS實現走馬燈效果
阿新 • • 發佈：2019-02-02
<!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.onmouseover=function(){
clearInterval(timer);
};
//滑鼠移出繼續
oDiv.onmouseout=function(){
run();
};
};
//------------------------------------------------------
marquee("div1",20);
marquee("div2",10);
</script>
<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.onmouseover=function(){
clearInterval(timer);
};
//滑鼠移出繼續
oDiv.onmouseout=function(){
run();
};
};
//------------------------------------------------------
marquee("div1",20);
marquee("div2",10);
</script>