WEB 门户网站开发常用UI 之 图片无缝滚动

向左侧滚动

相关CSS

 #photo-list {
            width: 998px;
            height: 172px;
            overflow: hidden;
        }

            #photo-list ul {
                margin: 0px;
                padding: 0px;
            }
                #photo-list ul li {
                    list-style-type: none;
                    width: 215px;
                    margin: 15px 25px 15px 0px;
                    float: left;
                    text-align: center;
                }
                    #photo-list ul li span {
                        display: block;
                        padding-top: 15px;
                        font-size: 15px;
                        font-weight: bold;
                    }
            #photo-list img {
                border: 1px solid #abc7f6;
            }

页面代码：

<div id="photo-list">
                    <ul id="scroll">
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>1</span>
                        </li>
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>2</span>
                        </li>
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>3</span>
                        </li>
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>4</span>
                        </li>
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>5</span>
                        </li>
                        <li>
                            <img src="../../Content/images/computer.png" />
                            <span>6</span>
                        </li>
                    </ul>
                    <script type="text/javascript" src="../../Scripts/MoveImg.js"></script><!--此处的js，一定要在此滚动模块之后引用！ -->
                </div>

 JS

/*
* 图片无缝向左滚动
*下面width的值一定要正确(包括img外面的border宽度（1*2 px）+img的padding（25px）、margin)，如果宽度有误差的话，图片滚动会有滚动速度错位的感觉
*一定要在使用页面模块 之后的位置引用这个js，否则无效。
*/
var id = function (el) { return document.getElementById(el); },
       c = id('photo-list');
if (c) {
    var ul = id('scroll'),
        lis = ul.getElementsByTagName('li'),
        itemCount = lis.length,
        width = lis[0].offsetWidth+2+25, //获得每个img容器的宽度
        marquee = function () {
            c.scrollLeft += 2;
            if (c.scrollLeft % width <= 1) {  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
                ul.appendChild(ul.getElementsByTagName('li')[0]);
                c.scrollLeft = 0;
            };
        },
        speed = 50; //数值越大越慢
    ul.style.width = width * itemCount + 'px'; //加载完后设置容器长度        
    var timer = setInterval(marquee, speed);
    c.onmouseover = function () {
        clearInterval(timer);
    };
    c.onmouseout = function () {
        timer = setInterval(marquee, speed);
    };
};

本章部分内容参考：http://jingyan.baidu.com/article/e4511cf3122da32b845eafb3.html