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>

  • 相关阅读:
    C++中函数模板template的使用
    C++中模板template和类class的结合使用
    Python中shuffle函数
    Python中利用tkinter模块构建图形用户界面GUI
    Python中怎样初始化一个类类class?
    Python中字典的has_key方法在3.4版本中改为in
    Python中怎样对数据集整体进行映射转换类型
    matlab中怎样对矩阵的某一列进行排序而使得其他列对应移动??
    Python中怎样使用shape计算矩阵的行和列
    27.反射2.md
  • 原文地址:https://www.cnblogs.com/dzy1997-com/p/6583035.html
Copyright © 2011-2022 走看看