配列を上手に使って画像切り替えのJSコードを作成する-jsチュートリアル-php.cn

配列を上手に使って画像切り替えのJSコードを作成する

高洛峰

リリース： 2016-12-03 14:49:27

オリジナル

1149 人が閲覧しました

前回の記事では、JSにおける配列の具体的な操作について説明しました。詳しくは、（JSにおける配列のさまざまな操作のまとめ）を参照してください。ここでは詳しく説明しません。今日の主な目的は、配列を使用して左右の画像を簡単に切り替える方法です。

この記事での画像切り替えの具体的な手順は次のとおりです:

ステップ 1: シンプルなレイアウトと基本的な表示スタイルを設計する;
ステップ 2: js を介して関連要素を取得する;
ステップ 3: 配列ストレージを介して画像の URL と画像を取得する
ステップ 4: 初期化: 画像の初期化、画像番号の表示、対応するテキストの初期化などを含みます。
ステップ 5: ボタンをクリックして画像を切り替え、実際には単純なアプリケーションです。配列の。

実装コード:

<!DOCTYPE html> <br>
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>图片切换</title> 
 <style> 
 .box{ 
 width: 600px; 
 height:400px; 
 border: 10px solid #ccc; 
 position: relative; 
 margin: 40px auto 0; 
 } 
 .box a{ 
 width: 30px; 
 height: 30px; 
 background-color: #000; 
 border: 5px solid #fff; 
 position: absolute; 
 top:180px; 
 text-align: center; 
 font-size:25px; 
 font-weight: bold; 
 line-height: 30px; 
 color:#fff; 
 text-decoration: none; 
 filter: alpha(opacity:40); 
 opacity: 0.4; 
 } 
 .box a:hover{ 
 filter:alpha(opacity:80); 
 opacity:0.8; 
 } 
 .box #prev{ 
 left: 10px; 
 } 
 .box #next{ 
 right: 10px; 
 } 
 #text,#num{ 
 height: 30px; 
 line-height:30px; 
 width: 600px; 
 color:#fff; 
 position: absolute; 
 left: 0; 
 background-color: #000; 
 text-align: center; 
 filter: alpha(opacity:80); 
 opacity: 0.8; 
 margin:0; 
 } 
 .box #text{ 
 bottom: 0; 
 } 
 .box #num{ 
 top:0; 
 } 
 .box #img1{ 
 width: 600px; 
 height: 400px; 
 } 
 </style> 
 <script> 
 window.onload = function () { 
 var oPrev = document.getElementById("prev"); 
 var oNext = document.getElementById("next"); 
 var oText = document.getElementById("text"); 
 var oNum = document.getElementById("num"); 
 var oImg = document.getElementById("img1"); 
  
 var arrUrl = [&#39;images/1.jpg&#39;,&#39;images/2.jpg&#39;,&#39;images/3.jpg&#39;,&#39;images/4.jpg&#39;]; 
 var arrText = [&#39;文字1&#39;,&#39;文字2&#39;,&#39;文字3&#39;,&#39;文字4&#39;]; 
  
 //初始化 
 var num = 0; 
 function fnTab(){ 
 oNum.innerHTML = num + 1 + &#39;/&#39; + arrText.length; 
 oImg.src = arrUrl[num]; 
 oText.innerHTML = arrText[num]; 
 }; 
 fnTab(); 
 oPrev.onclick = function(){ 
 num --; 
 if( num == -1){ 
  num = arrUrl.length -1; 
 } 
 fnTab(); 
 }; 
 oNext.onclick = function(){ 
 num ++; 
 if(num == arrUrl.length){ 
  num = 0; 
 } 
 fnTab(); 
 }; 
 }; 
 </script> 
</head> 
<body> 
 <div class="box"> 
 <a id="prev" href="javascript:;"> < </a> 
 <a id="next" href="javascript:;"> > </a> 
 <p id="text">图片正在加载中……</p> 
 <span id="num">数量正在统计中……</span> 
 <img id="img1" src="../images/1.jpg" alt=""> 
 </div> 
</body> 
</html>

ログイン後にコピー

この例は非常に単純で、主に配列の単純な読み書きと HTML 属性コンテンツの読み書きが含まれます。注意する必要があるのは、次の画像をクリックして最後の画像に移動するか、前の画像をクリックして最初の画像に移動する場合、特定の数値変更を設定する必要があることです。そうしないと、画像と数値が対応する境界を越えてしまいます。質問は内容がありません。