亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于javascript數(shù)組實(shí)現(xiàn)圖片輪播

 更新時(shí)間：2016年05月02日 19:53:12   作者：尼阿卡  
這篇文章主要為大家詳細(xì)介紹了基于javascript數(shù)組實(shí)現(xiàn)圖片輪播的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

圖片輪播的辦法有多種，在這里介紹一種簡(jiǎn)單的：js數(shù)組實(shí)現(xiàn)。

首先將圖片路徑存儲(chǔ)在數(shù)組中，然后再調(diào)用setInterval函數(shù)來(lái)依次輪播圖片

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

完整實(shí)例如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>使用數(shù)組實(shí)現(xiàn)圖片自動(dòng)輪播</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>使用數(shù)組實(shí)現(xiàn)圖片自動(dòng)輪播</h1>
  <img id = "imge" src = "1.png" alt="picture" /> 
 </div>
</body> 
</html>

精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論