代码笔记 | js数组实现图片自动轮播

最新推荐文章于 2022-09-20 11:32:43 发布

CodePudge

最新推荐文章于 2022-09-20 11:32:43 发布

阅读量970

点赞数

分类专栏：代码笔记文章标签：代码笔记图片

代码笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>使用数组实现图片自动轮播</title> 
  <style type="text/css">
    #main{
      width: 700px;
      height: 450px;
      margin: 0 auto;
      text-align: center;
    }
  </style>
  <script type="text/javascript"> 
    var curIndex = 0; 
    var timeInterval = 1000; 
    var arr = new Array(); 
    arr[0] = "1.png"; 
    arr[1] = "2.png"; 
    arr[2] = "3.png"; 
    arr[3] = "4.png"; 
    arr[4] = "5.png"; 
    setInterval(changeImg,timeInterval); 
    function changeImg() { 
       var obj = document.getElementById("imge"); 
       if (curIndex == arr.length-1) { 
         curIndex = 0; 
       } else { 
         curIndex += 1; 
       } 
       obj.src = arr[curIndex]; 
    } 
  </script> 
</head> 
<body> 
  <div id="main">
      <h1>使用数组实现图片自动轮播</h1>
      <img id = "imge" src = "1.png" alt="picture" /> 
  </div>
</body> 
</html>

CodePudge

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
代码笔记 | js数组实现图片自动轮播

使用数组实现图片自动轮播 #main{ width: 700px; height: 450px; margin: 0 auto; text-align: center; } var curIndex = 0; var timeInterval = 1000; var arr = new
复制链接

扫一扫