zoukankan      html  css  js  c++  java
  • 图片自动滚动,鼠标滑过悬停-12

    /*************模块3************/
    .main_3{ clear:both; 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{ 1000px; height:100px; overflow:hidden;  position:relative;}
    #ww_box{ 2000px;}
    #ww_box ul{ 1000px; position:absolute; left:0;}
    #ww_box ul li{ float:left; 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>

  • 相关阅读:
    RMQ(模板 ST 区间最值,频繁的间隔时间)
    编程算法基地-2.1利用字符串API
    android学习记录(三)百度地图错误---只有一个电话显示帧,没有地图内容。
    【MongoDB】在windows平台mongodb切片集群(三)
    Android MenuItem 设置文本颜色-TextColor设置
    wikioi 1034 家 实时动态的网络流量(费用流)
    where can I find source of com.android.internal.R.styleable.AlertDialog_multiChoiceItemLayout?
    Android开发之自定义Spinner样式的效果实现(源代码实现)
    Java注释@interface的用法
    依赖注入及AOP简述(十三)——AOP应用举例(完结) .
  • 原文地址:https://www.cnblogs.com/su1637/p/8203579.html
Copyright © 2011-2022 走看看