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>
  • 相关阅读:
    css--display详解
    关于overflow:hidden的作用
    float 应用
    flex 布局
    CSS+DIV布局中absolute和relative的区别
    线程和进程的区别是什么?
    .NET中读写SQL Server数据库需要用到哪些类?作用是什么?
    C# CookieHelper
    git pull/push代码 每次都要输入账户名和密码的解决方法
    git拉取远程分支到本地
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6539262.html
Copyright © 2011-2022 走看看