前端插件之跑马灯

1.效果图

不间断滚动。

2.css代码

#wrapper{
        border-top: 3px solid #EB782E;
        width: 1200px;
        margin: 0 auto;       
        margin-top: 30px;     
        position: relative;
      }
      #wrapper .over{width: 1200px;height: 100px;overflow: hidden;position: relative;}
      .hmBom_nm { color: #FFF; background: #eb782e; position: absolute; left: 0px; top: -15px; line-height: 27px; height: 27px; width: 160px; font-size: 12px; font-weight: bold; text-align: center; display: inline-block; padding: 0px 18px; border-radius: 1.6em; text-transform: uppercase; }
      #wrapper ul {
        position: absolute;
        left: 0;
        top: 10px;
      }
      #wrapper li{
      	text-align: center;
        float: left;
        width: 120px;
        margin-right: 40px;
        list-style: none;
      }
      #wrapper li img{
        width: 120px;
        height: 40px;
        
      }

3.js代码

window.οnlοad=function(){
        var timer=null;
        var speed=-2;
        var od=document.getElementById("wrapper");
        var au=od.getElementsByTagName('ul')[0];
        var ali=au.getElementsByTagName('li');
        au.innerHTML=au.innerHTML+au.innerHTML;
        au.style.width=(ali[0].offsetWidth+40)*ali.length+'px';
        timer=setInterval(move,30)
        function move(){
          if(au.offsetLeft<-au.offsetWidth/2){
            au.style.left='0';
          }
          if(au.offsetLeft>0){
            au.style.left=-au.offsetWidth/2+'px';
          }
          au.style.left=au.offsetLeft+speed+'px';
        }
        od.οnmοuseοver=function(){
          clearInterval(timer);
        }
        od.οnmοuseοut=function(){
          timer=setInterval(move,30)
        }
        
      }

3.html代码

<div id="wrapper" >	
		<div class="hmBom_nm">合作伙伴partner</div>
		<div class="over">
	      <ul>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        <li>
	        	<img src="1.jpg"/>
	        	<p>1</p>
	        </li>
	        
	      </ul>
	      </div>
	    </div>