您的位置：首页 > Web前端 > JavaScript

js数组实现图片轮播

2016-03-14 12:38 1961 查看

图片轮播的办法有多种，在这里介绍一种简单的：js数组实现。

首先将图片路径存储在数组中，然后再调用setInterval函数来依次轮播图片

  <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>

完整实例如下

<!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>


(adsbygoogle = window.adsbygoogle || []).push({});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js 图片轮播
相关文章推荐
新的分享
章节导航