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