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>
  • 相关阅读:
    Bootstrap框架
    前端基础之CSS
    前端知识之HTML内容
    python之路----递归函数
    python控制台输出带颜色文字的方法
    ELK搭建<三>:安装Kibana
    ELK搭建<二>:安装ES插件head
    ELK搭建<一>:搭建ES集群
    前端angular使用crypto-js进行加密
    Mac下全局安装yarn
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6539262.html
Copyright © 2011-2022 走看看