您的位置:首页 > 其它

左右无缝滚动图片

2011-07-26 17:05 225 查看
 <style type="text/css">
    <!--
.leftArrow{
 margin:55px 8px 0 0;
 float:left;
 clear:left;
 border:0px;
 cursor:pointer;
}
.rightArrow{
 margin:55px 0;
 float:right;
 clear:right;
 border:0px;
 cursor:pointer;
}
    #demo {
 overflow:hidden;
     width: 550px;
    }
    #demo img {
     border: 3px solid #F2F2F2;
    }
    #indemo {
     float: left;
     width: 800%;
    }
    #demo1 {
     float: left;
    }
    #demo2 {
     float: left;
    }
    -->
    </style>
    <a class="leftArrow"><img src="images/left.gif"/></a>
  <a class="rightArrow"><img src="images/right.gif"/></a>
    <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="#"><img src="images/scrollImg1.gif" border="0" /></a>
   <a href="#"><img src="images/scrollImg2.gif" border="0" /></a>
   <a href="#"><img src="images/scrollImg3.gif" border="0" /></a>
   <a href="#"><img src="images/scrollImg4.gif" border="0" /></a>
   <a href="#"><img src="images/scrollImg5.gif" border="0" /></a>
    </div>
    <div id="demo2"></div>
    </div>
    </div>
    <script>
    <!--
    var speed=10; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function MarqueeR(){
    if(tab.scrollLeft<=0)
    tab.scrollLeft+=tab2.offsetWidth
    else{
    tab.scrollLeft--
    }
    }
 function MarqueeL(){
  if(tab.scrollLeft>=tab1.scrollWidth){
     tab.scrollLeft=0
  }else{
   tab.scrollLeft++
  }
}
    var MyMarL;
 var MyMarR;
    tab.onmouseover=function() {clearInterval(MyMarL);clearInterval(MyMarR);};
 tab.onmouseleave=function(){
   if(MyMarL<MyMarR || MyMarL==undefined){
    MyMarR=setInterval(MarqueeR,speed);
   }
   else{
    MyMarL=setInterval(MarqueeL,speed);
    }
  };
 $('.rightArrow').click(function(){
   if(MyMarR==undefined || MyMarL>MyMarR){
    clearInterval(MyMarL);
    MyMarR=setInterval(MarqueeR,speed);}      
   });
 $('.leftArrow').click(function(){
   if(MyMarL==undefined || MyMarR>MyMarL){
    clearInterval(MyMarR);
    MyMarL=setInterval(MarqueeL,speed);}      
   });
    -->
    </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  border function float div class