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>
  • 相关阅读:
    ubuntu挂载群晖共享文件
    200. 岛屿数量_中等_不再记笔记了
    733. 图像渲染_简单_矩阵
    46. 全排列_中等_模拟
    37. 解数独_困难_矩阵
    1041. 困于环中的机器人_中等_模拟
    946. 验证栈序列
    415. 字符串相加_简单_模拟
    164. 最大间距_数组_困难
    215. 数组中的第K个最大元素_中等_数组
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6539262.html
Copyright © 2011-2022 走看看