js图片循环滚动效果2种例子

在网页中，会经常用到图片滚动的效果。

如下图：

那么是怎样实现的呢？

方法一：imgscroll.js。顾名思义，它是一款图片滚动插件。源码如下：

$.fn.imgscroll = function(o){
    var defaults = {
        speed: 40,
        amount: 0,
        width: 1,
        dir: "left"
    };
    o = $.extend(defaults, o);
    
    return this.each(function(){
        var _li = $("li", this);
        _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
        _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
        _li.css({position: "relative", overflow: "hidden"}); //li
        if(o.dir == "left") _li.css({float: "left"});
        
        //初始大小
        var _li_size = 0;
        for(var i=0; i<_li.size(); i++)
            _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
        
        //循环所需要的元素
        if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
        _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
        _li = $("li", this);
 
        //滚动
        var _li_scroll = 0;
        function goto(){
            _li_scroll += o.width;
            if(_li_scroll > _li_size)
            {
                _li_scroll = 0;
                _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
                _li_scroll += o.width;
            }
                _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
        }
        
        //开始
        var move = setInterval(function(){ goto(); }, o.speed);
        _li.parent().hover(function(){
            clearInterval(move);
        },function(){
            clearInterval(move);
            move = setInterval(function(){ goto(); }, o.speed);
        });
    });
};

引用的方法如下：

$(".scroll").imgscroll({
    speed: 40,    //图片滚动速度
    amount: 0,    //图片滚动过渡时间
    width: 1,     //图片滚动步数
    dir: "left"   // "left" 或 "up" 向左或向上滚动
});
其中，”.scroll”是滚动的对象。

这种方法的确实现了效果，但是存在一些问题。在页面第一次刷新时会出现错乱。
于是找了第二种方法。

方法二：源生js代码

html:

js代码：

var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");//获取对象
tab2.innerHTML=tab1.innerHTML;//将tab1的内容给tab2
 
function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

试过了方法二，在所有浏览器上都能实现，唯独在IE6下却没有作用。出现的效果是仅仅下方的文字滚动，而图片不滚。

于是慢慢找原因。

一开始以为是高度的问题，后来确定不是。
后来把图片换成jpg格式的，就可以了。想了一下是不是因为格式的问题，可是这种问题应该不会造成兼容性问题。
于是想到png与jpg的区别，突然就找到了问题出现的原因。
在IE6下为了解决png图片不透明的问题，我们使用了DD_belatedPNG.js。代码如下：

结果就是因为给img透明，才造成了图片不滚文字滚的问题。所以应该在我们需要透明的图片上加样式。就像这样：

以上，就是两种实现图片滚动的方法。对比一下，还是方法二更好一些。有兴趣的同学可以试一试