前端插件之跑马灯

阳光穿透心脏的1/2处 2022-06-09 07:44 696阅读 0赞

1.效果图

![20170831131759762][]

不间断滚动。

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>

[20170831131759762]: /images/20220609/0384b66de1694aec80af4afbe63cebc1.png