JS实现无缝循环marquee滚动效果

  #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>

/**除了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");  }});