zoukankan      html  css  js  c++  java
  • js实现图片轮播效果

    感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈。

    要好好的纪念下这个东西,以后忘了再来这边看看!超赞,

    当自己做出这个效果的时候,很有成就感的(ノω<。)ノ))☆.。

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #div1{
    192px;
    height: 120px;
    border: 1px solid gray;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    }
    #div1 img{
    position: absolute;
    }
    </style>
    </head>
    <body>
    <div id="div1">
    <img src="images/1.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(){
    div2.innerHTML="";
    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.left="384px";
    }
    else{
    imgs[i-1].style.left="384px";
    }
    }
    }
    if(!b1){
    setTimeout(imgMove,1);
    }
    else{
    setTimeout(imgMove,3000);
    }
    }
    //开始调用
    setTimeout(imgMove,200);
    </script>
    </body>
    </html>
  • 相关阅读:
    Linux下的邮件发送
    Linux下用户和raid练习题
    Linux centos7.5操作系统的安装
    Linux chattr文件锁
    Linux系统下root密码丢失解决方案
    周总结2
    课堂作业1
    开课博客
    阅读3
    作业8
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6539262.html
Copyright © 2011-2022 走看看