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>
  • 相关阅读:
    unittest learning
    C++类和对象
    Linux shell基础(十二)
    Linux shell基础(十一)
    Linux shell基础(十)
    Linux shell基础(九)
    Linux shell基础(八)
    Linux shell基础(六)
    Linux shell基础(七)
    Linux shell基础(五)
  • 原文地址:https://www.cnblogs.com/daysme/p/6144643.html
Copyright © 2011-2022 走看看