zoukankan      html  css  js  c++  java
  • 自动轮播

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                192px;
                height: 120px;
                border: 1px solid gray;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }
            #div1 img{
                position: absolute;
            }
        </style>
    </head>
    <body>
    <div id="div1">
        <img src="images/1.jpg" alt="" width="192"/>
        <img src="images/2.jpg" alt="" width="192"/>
        <img src="images/3.jpg" alt="" width="192"/>
        <img src="images/4.jpg" alt="" width="192"/>
    </div>
    <div id="div2">

    </div>
    <script>
        //获取页面元素
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var imgs = div1.getElementsByTagName('img');
        //初始化页面图片的位置
        window.onload=function(){
            for(var i=0; i<imgs.length; i++){
                imgs[i].style.left = i*192 +'px'
            }
        };
        //轮播移动的函数
        function imgMove(){
            var b1 = false;
            for(var i = 0; i < imgs.length; i++) {
                imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
                if(imgs[i].offsetLeft==0){
                    b1=true;
                    if(i==0)
                    imgs[imgs.length-1].style='576px';
                    else
                    imgs[i-1].style.left='576px'
                }
            }
            if(!b1)
                setTimeout(imgMove,20);
            else
                setTimeout(imgMove,2000);
        }
        setTimeout(imgMove,3000);
    </script>
    </body>
    </html>

  • 相关阅读:
    SAP 差旅报销集成方案的实现
    SAP DBDI 网银接口实现案例
    SAP Actual Costing with Material Ledger 激活实际成本后台配置
    技能UP:SAP CO掌上配置手册
    技能UP:SAP OBYC自动记账的实例说明(含value String应用说明)
    SAP OBYC自动记账的实例说明 +VALUE STRING
    SAP MM/FI 自动过账实现 OBYC 接口执行
    情商UP:不遵守八小时工作制,你就能富起来??
    SAP中方会计凭证打印解决方案
    二维码推广方法20种
  • 原文地址:https://www.cnblogs.com/dzy1997-com/p/6583035.html
Copyright © 2011-2022 走看看