Javascript:图片无限循环滚动 ---- Hiro，工作，生活

分享到

新浪微博

豆瓣

QQ空间

Twitter

Javascript:图片无限循环滚动

分类:Pure Javascript 发表时间:2011年02月24日字体大小:12号 14号

早前为一位博友写了一个走马灯效果（增强型走马灯公告栏，可以抛弃marquee标签了，点击看效果），但时是基于jQuery库写的。效果实现的优点牵强。而且当时的效果是页面加载完后一片空白，只有开始播放后才从底部出来。

年前用wordpress给公司做内部信息分享平台时，有一块是用来横向无限循环播放展示team building的图片。之前的效果不适合，便又写了一段原生的js来实现。主要实现原理是间隔时间地设置一个overflow:hidden;的div的scrollLeft。

download demo

一、HTML代码：

<div id="photo-list">
    <ul id="scroll">
        <li><a href="http://www.ihiro.org/intellij-idea"><img src="http://www.ihiro.org/blog/wp-content/uploads/2011/01/logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/javascript-getweek-by-date"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/calendar.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/beginning-python"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/12/beginning-python.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/css-position-hack"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/position-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/text-range"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/text-range.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/html5-pro-ebook-recommendations"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/11/Pro_Html5_logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-plugin-recommended-maphighlight"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/10/maohightlight-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/jquery-format-extend"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/jQuery.format_logo.png" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/information-september-2010-programming-language-list"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/08/2010.08.language-logo.jpg" width="100px" height="100px" alt=""/></a></li>
        <li><a href="http://www.ihiro.org/example-selectbox-simulation"><img src="http://www.ihiro.org/blog/wp-content/uploads/2010/09/select_logo.png" width="100px" height="100px" alt=""/></a></li>
    </ul>
</div>

使用一个无需列表，通过左浮横向显示。设置容器div的尺寸，超出部分不显示。

二、CSS代码：

* { padding:0; margin:0;}
body { text-align:center;}
 
#photo-list {
     /* 3张图片的宽度（包含宽度、padding、border、图片间的留白）
         计算：3*(100+2*2+1*2+9) - 9
         之所以减去9是第三张图片的右边留白
     */
    width:336px;
    /* 图片的宽度（包含高度、padding、border）
        计算：100+2*2+1*2
    */
    height:106px;
    margin:50px auto; overflow:hidden;
    border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

注释中写明了容器div的尺寸计算方法。页面加载完成后未播放时的效果：

Firebug查看尺寸图：

三、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, //获得每个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);
    };
};