zoukankan      html  css  js  c++  java
  • js自动小轮播

    使用定时器,换个图片地址。

    从1到5换,如果大于5了再跳到1,点击停止时关闭定时器。

    <!--
    Author: XiaoWen
    Create a file: 2016-12-08 13:19:25
    Last modified: 2016-12-08 13:39:27
    Start to work:
    Finish the work:
    Other information:
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>自动小轮播</title>
      <style>
        ul,li{
          margin:0;
          padding:0;
          list-style:none;
        }
        ul,li,img{
          width: 300px;
          height: 200px;
          line-height:200px;
          overflow: hidden;
          background:#ccc;
          text-align:center;
        }
      </style>
    </head>
    <body>
      <input type="button" value="轮播">
      <input type="button" value="停止">
      <ul>
        <li><img src="" alt="1.jpg"></li>
      </ul>
      <script>
        var a_ipt=document.getElementsByTagName("input");
        var img=document.getElementsByTagName("img")[0];
        var tim; //定时器
        var i=1; //图片名
        a_ipt[0].onclick=function(){
          tim=setInterval(function(){
            img.alt=i+1+".jpg"; //当然是从下一张开始播
            i++;
            if(i%5==0){ //超过5张从第一张开始
              i=0;
            }
          },100)
        }
        a_ipt[1].onclick=function(){
          clearInterval(tim);
        }
      </script>
    </body>
    </html>
  • 相关阅读:
    IDEA 必要配置
    人工智能能力提升指导总结
    lerna管理前端packages的最佳实践
    【和60】软件即服务的三重境界
    项目章程
    阅读计划
    使用PHP处理文本小技巧
    PHP性能分析
    Ubuntu安装nodejs和yarn
    挖矿病毒
  • 原文地址:https://www.cnblogs.com/daysme/p/6144643.html
Copyright © 2011-2022 走看看