如何用jQuery做一个跑马灯，Marquee。

先看要实现的需求：

    1.文字或者图片能够在区域内按照一定的规则进行滚动

    2.滚动区域是否有限制，滚动内容超出限制区域的处理

完成后的效果：

代码实现

    

    

        
item1
        
item2
        
item3
        
item4
        
item6
        
item7
        
item8
        
item9
        
item10
    

HTML结构还是很简单的，就是一个无序列表，横过来就设float：left就好了。

重点来了，怎样让每一个列表项动起来。动的逻辑就是改变无序列表的整体的位置，涉及到位置，那就绕不卡，定位属性。

所以这里很自然的想到，整体ul参照父层div进行绝对定位，通过改变left的值来使ul整体的位置发生变动。

用jQuery实现的话，关键部分的代码应该是这样的

$(function () {
            var i=0;
            var timer;
            timer=setInterval(function(){
                    //根据ul的位移来判断一秒钟向左移动的距离；
                if(i>$('li').length){
                    i=1;
                    //如果所有li元素向左移动一遍完成，那滚动重新开始
                }else{
                    i++;
                }
                    //通过i的值来改变整体li元素的位置
                var ulLeft=-($('li').width())*i;
                $('.ulPmd').css('left',ulLeft)
            },1000);
})

审查元素观察滚动效果

蓝底部分就是ul的位置，jQuery控制ul相对于黑色div的left位置。

源码见github
跑马灯点这