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

Ø  前言

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

 

1.   首先定义 css 样式

<style type="text/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 代码

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