js图片从右到左循环播放

来源:互联网 发布:手机怎么和电脑抢网络 编辑:程序博客网 时间:2024/05/08 11:21
 

方法一:

<div class="proshow">
     <h2>户型图展示</h2>
     <div id="container">
     <ul>
       <asp:DataList ID="dPic" runat="server"  RepeatDirection="horizontal" RepeatColumns="4">
              <ItemTemplate>
              <li>
              <a href="javascript:;" onMouseOver="MM_swapImage('bigImg','','<%#GetLength((int)((DataRowView)Container.DataItem)["ArticleID"])%>',0)">
              <img src="<%#GetLength((int)((DataRowView)Container.DataItem)["ArticleID"])%>" alt="" width="114" height="98" border="0"></a></li>
            </ItemTemplate>
              </asp:DataList>
      </ul>
     </div>
    </div>
    <script type="text/javascript">
     var Fn = function(parentElem,space,interval){
      var timer = null;
      var obj = document.getElementById(parentElem);
      obj.innerHTML = "<div style=\"width:9999px;\" >" + obj.innerHTML + "</div>";
      var childObj1 = obj.getElementsByTagName("ul")[0];
      var childObj2 = document.createElement("ul");
      var innerDiv = obj.getElementsByTagName("div")[0];
      innerDiv.appendChild(childObj2);
      if(childObj1.offsetWidth>=obj.offsetWidth){
       childObj2.innerHTML = childObj1.innerHTML;
       function Scroll(){
        if(obj.scrollLeft>=childObj1.offsetWidth){
         obj.scrollLeft -= childObj1.offsetWidth;
        }else{
         obj.scrollLeft += space;
         //alert(obj.scrollLeft)
        }
       }
       timer = setInterval(Scroll,interval);
       
       obj.onmouseover = function(){
        //debugger;
        clearInterval(timer);
       }
       
       obj.onmouseout = function(){
        timer = setInterval(Scroll,interval);
       }
      }
     }
     
     Fn("container",1,20);
    </script>

 

 

方法二:

<script>
var speed=5
marqueex2.innerHTML=marqueex1.innerHTML
function Marquee(){
 if(marqueex2.offsetWidth-marqueex.scrollLeft<=0)
  marqueex.scrollLeft-=marqueex1.offsetWidth
 else{
  marqueex.scrollLeft++
 }
}
var MyMar=setInterval(Marquee,speed)
marqueex.onmouseover=function() {setInterval(Marquee,speed)}
marqueex.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>