无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome

无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome

首先是CSS和HTML如下:

    #marquee_zxd {
        border: 1px solid red;
        white-space: nowrap;
        overflow: hidden;
        width: 500px;
        padding-top: 5px;

    }

    #marquee_zxd img {
        height: 100px;
    }

<!--　横向一定要是span -->
        <div id="marquee_zxd"><span>
            <!-- 内嵌一个div很重要，里面的元素必须是一个整体的移动。另外横移时，必须是行级元素只占自己的空间。 -->
            <div id="marquee_inner" style="position:relative; display: inline-block;">
            <img src="img/duck.png"/>
            <img src="img/donkey.png"/>
            <img src="img/eggbird.png"/>
            <img src="img/elephant.png"/>
            <img src="img/butterfly.png"/>
        </div>
        </span></div>

<script type="text/javascript" src="${cpath}/js/marquee_zxd.js"></script>

下面是JS实现marquee_zxd.js：

/**除了Chrome以外的浏览器可以通过scrollLeft属性控制滚动*/
function scrolleft(obj){
    var $obj = $(obj); 
    //到右边顶端后不会再变
    //var temp = obj.scrollLeft;
    //obj.scrollLeft++;
    var temp = $obj.scrollLeft();
    //console.log(temp);
    $obj.scrollLeft(temp+1);
    //当滚动条到达右边顶端时;或本身长度不够不好滚动(漫出才好滚)
    //if(obj.scrollLeft == temp){
    if($obj.scrollLeft() == temp){
        obj.innerHTML += obj.innerHTML;
        console.log('copy');
    }
    //当滚动条滚动了初始内容的宽度时，滚动条回到最左端，模拟循环
    //if (obj.scrollLeft >= obj.firstChild.offsetWidth)
    //    obj.scrollLeft = 0;
    if ($obj.scrollLeft() >= obj.firstChild.offsetWidth)
        $obj.scrollLeft(0);
}

/**除了Chrome以外的浏览器可以通过scrolleft()滚动*/
function initMarquee(){
    var aaa = document.getElementById('marquee_zxd');
    var MyMar = setInterval(function(){
        scrolleft(aaa);
    }, 20);

    //鼠标移上时清除定时器达到滚动停止的目的
    aaa.onmouseover=function() {clearInterval(MyMar);};
    //鼠标移开时重设定时器
    aaa.onmouseout=function() {MyMar = setInterval(function(){
        scrolleft(aaa);
    }, 20);};
}    


/**Chrome定时器循环函数，通过relative布局的left属性控制滚动*/
function scrolleftChrome($marquee_inner, inner_width){
    var width = parseInt(inner_width);
    var leftPx = $marquee_inner.css("left");
    //兼容IE
    if(leftPx == 'auto')
        leftPx = 0;
    //位置左移
    var left  = parseInt(leftPx);       
    left = left - 1;
    //到顶归位
    if(left <= -width)
        left = 0;
    $marquee_inner.css("left", left);
    //console.log(width + ", " + left);
}

/**Chrome浏览器可以通过scrolleftChrome滚动*/
function initMarqueeChrome() {
    //局部变量不污染全局变量空间
    var $marquee_inner = $('#marquee_inner');
    //原内容大小
    var inner_width = $marquee_inner.css('width');
    //复制一份原内容
    var innerHtml = $marquee_inner.html();
    $marquee_inner.html(innerHtml + innerHtml);

    console.log(inner_width);
    //参数采用字符串形式的缺陷：参数不能被周期性改变,参数必须是全局变量
    //var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000);
    var MyMar = setInterval(function(){
        //参数不污染全局变量空间
        scrolleftChrome($marquee_inner, inner_width);
    }, 50);

    var marquee_zxd = document.getElementById('marquee_zxd');
    //鼠标移上时清除定时器达到滚动停止的目的
    marquee_zxd.onmouseover=function() {clearInterval(MyMar);};
    //鼠标移开时重设定时器
    marquee_zxd.onmouseout=function() {
        //参数采用字符串形式的缺陷：参数不能被周期性改变,参数必须是全局变量
        //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50);
        MyMar = setInterval(function(){
            //参数不污染全局变量空间
            scrolleftChrome($marquee_inner, inner_width);
        }, 50);
    };
}

$(function(){
    var ua = window.navigator.userAgent;  
    var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1;  
    var isFirefox = ua.indexOf("Firefox") != -1;  
    var isChrome = ua.indexOf("Chrome") && window.chrome;  

    if(isChrome){
        initMarqueeChrome();
        console.log("isChrome: initMarqueeChrome");
    }else{
        initMarquee();
        console.log("isChrome: initMarquee");
    }
});