使用 JS 实现图片左右跑马灯

Ø  前言

之前写了一篇使用 JS 实现文字上下跑马灯，现在乘热打铁在把图片左右跑马灯一起贴出来，不多说直接看代码。

1.   首先定义 css 样式

<style type="text/css">

*{

margin: 0px;

padding: 0px;

list-style: none;

}

#div1{

width: 500px;

height: 125px;

margin: 60px auto 0px auto;

border: 2px solid lightgreen;

position: relative;

overflow: hidden;

}

#ul_img{

position: absolute;

top: 0;

left: 0;

}

#ul_img li{

float: left;

width: 125px;

height: 125px;

/*border: 1px solid red;*/

}

#ul_img li img{

width: 100%;

height: 100%;

}

</style>

2.   HTML 代码

<div id="div1">

<ul id="ul_img">

<li><img src="../../../../Images/301.jpg" alt=""/></li>

<li><img src="../../../../Images/201.jpg" alt=""/></li>

<li><img src="../../../../Images/302.gif" alt=""/></li>

<li><img src="../../../../Images/202.jpg" alt=""/></li>

<li><img src="../../../../Images/203.jpg" alt=""/></li>

</ul>

</div>

3.   JS 代码

var millisec = 10;    //滚动间隔时间（毫秒）

var intervalId;

var left = 0;

var ul;

window.onload = function(){

ul = document.getElementById("ul_img");

ul.innerHTML += ul.innerHTML;   //复制一份相同的li

var lis = ul.getElementsByTagName("li");

ul.style.width = (lis[0].offsetWidth * lis.length) + "px";  //重新设置宽度

intervalId = setInterval("scroll()", millisec);

var div1 = document.getElementById("div1");

div1.onmouseover = function(){

clearInterval(intervalId);

}

div1.onmouseout = function(){

intervalId = setInterval("scroll()", millisec);

}

}

function scroll(){

left -= 1;

//定位小于等于总宽度的二分之一时，则left设置为0

if(left <= -ul.offsetWidth / 2)

left = 0;

ul.style.left = left + "px";

}

4.   运行效果

Ø  分析

1.   总体来说还是比较简单，首先定义了一个 div，并在内部定义了 ul li 标签，用于存放图片。

2.   再将 ul 标签绝对定位，li 标签左浮动，img 宽度与高度设置100%。

3.   js 运行时，首先复制一份所有的 li 标签，加入 ul 中（用于滚动时的下一份图片集合）。

4.   在 js 中可以看到，当ul 的 left 值小于 ul.offsetWidth 的二分之一时，就重新定位 ul 标签，这样就实现了循环滚动。