画像の配列から画像を表示 - Javascript

Question

私は自分のホームページに表示される大きな画像を持っています。ユーザが「next_img」ボタンをクリックすると、ホームページの大きな画像が配列の次の画像に変わります。

ただし、クリックされた次の矢印は何もせず、ホームページのメイン画像は変更されません。

私はこれをjavascriptで行う必要があります。 HTMLで

：

<!--Main Content of the page --> 

<div id="splash"> 
<img src="images/img/Splash_image1.jpg" alt="" id="mainImg"> 

</div> 

<div id="imglist"> 
<a href="javascript:nextImage('mainImg')"><img src="images/next_img.png" alt=""></a> 

そしてジャバスクリプトファイルに：

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'images/img/Splash_image3.jpg'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'images/img/Splash_image4.jpg'; 

imgArray[4] = new Image(); 
imgArray[4].src = 'images/img/Splash_image5.jpg'; 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

    for(var i = 0;i<imgArray.length;i++) 
    { 
     if(imgArray[i] == img) 
     { 
      if(i == imgArray.length) 
      { 
       var j = 0; 
       document.getElementById(element).src = imgArray[j].src; 
       break; 
      } 
      else 
      var j = i + 1; 
      document.getElementById(element).src = imgArray[j].src; 
      break; 
     } 
    } 
} 

任意の助けいただければ幸いです。ありがとう。

Answer 1

Diodeusと同じように、ImageとHTMLDomObjectを比較しています。代わりに、彼らの.src属性を比較します

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

/* ... more images ... */ 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

    for(var i = 0; i < imgArray.length;i++) 
    { 
     if(imgArray[i].src == img.src) // << check this 
     { 
      if(i === imgArray.length){ 
       document.getElementById(element).src = imgArray[0].src; 
       break; 
      } 
      document.getElementById(element).src = imgArray[i+1].src; 
      break; 
     } 
    } 
} 

Answer 2

ここにあなたの問題です：

if(imgArray[i] == img) 

あなたはDOMオブジェクトに配列要素を比較しています。

Answer 3

はここで、これを実現するための、ややきれいな方法です。これにより、次のように変更されます。

1. コードは、重複して繰り返されるコードと文字列を削除するためにDRYされます。
2. コードはより一般的な/再利用可能になりました。
3. 私たちはオブジェクトにキャッシュを作成し、自己完結型インターフェイスを持ち、より少ないグローバルが存在するようにします。
4. DOM要素の代わりに.src属性を比較して正しく動作させるようにします。

コード：

function imageCache(base, firstNum, lastNum) { 
    this.cache = []; 
    var img; 
    for (var i = firstNum; i <= lastnum; i++) { 
     img = new Image(); 
     img.src = base + i + ".jpg"; 
     this.cache.push(img); 
    } 
} 

imageCache.prototype.nextImage(id) { 
    var element = document.getElementById(id); 
    var targetSrc = element.src; 
    var cache = this.cache; 
    for (var i = 0; i < cache.length; i++) { 
     if (cache[i].src) === targetSrc) { 
      i++; 
      if (i >= cache.length) { 
       i = 0; 
      } 
      element.src = cache[i].src; 
      return; 
     } 
    } 
} 

// sample usage 

var myCache = new imageCache('images/img/Splash_image', 1, 6); 
myCache.nextImage("foo"); 

この複数のオブジェクト指向とDRYedアプローチのいくつかの利点：

1. あなただけの数値のシーケンス内の画像を作成し、1つの数値を変更することで、より多くの画像を追加することができます配列の宣言の行をもっとたくさんコピーするのではなく、コンストラクタの値を使用します。
2. 複数のimageCacheオブジェクトを作成するだけで、複数の場所をアプリで使用できます。
3. N個の文字列ではなく1つの文字列を変更して、ベースURLを変更できます。
4. コードサイズが小さくなりました（繰り返しコードが削除されたため）。
5. キャッシュオブジェクトは、first、last、skipなどのより多くの機能を提供するように簡単に拡張できます。
6. 1つのイメージが存在しないため、正常に読み込まれると、自動的にキャッシュから削除されます。
7. 開発者が開発した他のWebページでこれを再利用するには、コンストラクタに引数を変更し、実際に実装コードを変更しないでください。

P. DRYが何を表しているのかわからないのであれば、それは「あなた自身を繰り返さないでください」ということです。基本的には、類似したコードのコピーをたくさん持たないでください。いつでも、それは何とかループや関数、あるいは同様に見えるコードのコピーをたくさん必要としないようにする必要があります。最終結果は小さくなり、通常は保守が容易になり、しばしば再利用可能になります。

Answer 4

また、最後のイメージをチェックするときは、配列の長さが2の場合など、値0と1を取るため値2に達しないため、imgArray.length-1と比較する必要があります。長さ-1ではない長さと比較し、ここでは固定回線である：

if(i == imgArray.length-1) 

Answer 5

これは単純な例であり、いくつかの変更を使用して、あなたとそれを組み合わせるしてみてください。私はあなたのコードが読みやすくおよび短くするために、1つのアレイ内のすべての画像を設定することを好む：

var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg", 
    "_images/image4.jpg","_images/image5.jpg","_images/image6.jpg"]; 

var imageIndex = 0; 

function changeImage() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex = (imageIndex + 1) % imageArray.length; 
} 

setInterval(changeImage, 5000); 

Answer 6

<script type="text/javascript"> 
function bike() 
{ 
var data= 
["b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg", "b6.jpg", "b7.jpg", "b8.jpg"]; 
var a; 
for(a=0; a<data.length; a++) 
{ 
document.write("<center><fieldset style='height:200px; float:left; border-radius:15px; border-width:6px;")<img src='"+data[a]+"' height='200px' width='300px'/></fieldset></center> 
} 
}