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>

  • 相关阅读:
    uva11059
    uva725
    程序中double类型的数输出为什么要用lf
    c++形参和实参同名时,如何单步执行观察形参的变化。
    台式机的字母键和数字键都不能正常使用了呢?
    找错误——下面的程序意图在于统计字符串中字符数1的个数,可惜有瑕疵
    初学者常见错误1——赋值时的类型转换
    scanf
    c++的调试与运行
    黑猫派对
  • 原文地址:https://www.cnblogs.com/dzy1997-com/p/6583035.html
Copyright © 2011-2022 走看看