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>
原文地址:https://www.cnblogs.com/daysme/p/6144643.html