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

Ø 前言

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

1. 首先定义 css 样式

margin: 0px;

padding: 0px;

list-style: none;

}

#div1{

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;

125px;

height: 125px;

/*border: 1px solid red;*/

}

#ul_img li img{

100%;

height: 100%;

}

</style>

2. HTML 代码

</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 标签，这样就实现了循环滚动。