图片自动滚动,鼠标滑过悬停-12

/*************模块3************/
.main_3{ clear:both; width:1000px; margin:10px auto 0 auto; height:180px;}
.main_3 h3{font-family:"微软雅黑"; font-size:24px; font-weight:normal; height:40px; line-height:40px; color:#444444; text-indent:6px;}
#main_3box{ height:100px; background:#A8A8A8; padding:11px 0;}
#main_3box_w{ width:1000px; height:100px; overflow:hidden;  position:relative;}
#ww_box{ width:2000px;}
#ww_box ul{ width:1000px; position:absolute; left:0;}
#ww_box ul li{ float:left; width:150px; height:100px; margin-left:20px;}


<!------------模块3------------>
<div class="main_3">
      <h3>往届热销产品</h3>
      <div id="main_3box">
          <div id="main_3box_w">
               <div id="ww_box">
                    <ul>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                         <li><a href="#" target="_blank"><img src="images/img1.jpg" width="150" height="100"></a></li>
                    </ul>
             </div>
          </div>
      </div>
</div>

<script>
   window.onload=function(){
   var wrap=document.getElementById("main_3box_w");
   var scrolls=document.getElementById("ww_box")
   var oul=scrolls.getElementsByTagName("ul")[0];
   var lis=oul.getElementsByTagName("li");
   var timer,
       speed = 10,
       step = 1;

   oul.innerHTML+=oul.innerHTML;
   oul.style.width=lis[0].offsetWidth*lis.length+'px';
 
   timer = setInterval( show, speed );
    function show(){
       oul.style.left=oul.offsetLeft-step +'px';
       if(oul.offsetLeft<-oul.offsetWidth/2){
           oul.style.left='0px';
       }   
   };
   wrap.onmouseover = function(){
        clearInterval( timer );
    };
    wrap.onmouseout = function(){
        timer = setInterval( show, speed );
    };
};

</script>

posted @ 2018-01-05 11:48  南瓜小园  阅读(165)  评论(0编辑  收藏  举报