JavaScript array_javascript スキルに基づいた画像カルーセルの実装-jsチュートリアル-php.cn

JavaScript array_javascript スキルに基づいた画像カルーセルの実装

WBOY

リリース： 2016-05-16 15:02:38

オリジナル

1784 人が閲覧しました

画像をカルーセルする方法はたくさんありますが、ここでは簡単な方法、つまり 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>

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。