web-dev-qa-db-ja.com

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

ホームページに大きな画像が表示されており、ユーザーが「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>

そして、javascriptファイルで：

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

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

javascripthtmlarraysimage
12
Navigatron

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;
        }
    }
}
11
Zeta

また、最後の画像を確認するときは、imgArray.length-1と比較する必要があります。たとえば、配列の長さが2の場合、値0と1を取得するため、値2に到達しないため、長さではなく長さ-1と比較してください。ここに固定行があります。

if(i == imgArray.length-1)
4
Hooby

これを実装する、いくぶんクリーンな方法を次に示します。これにより、次の変更が行われます。

  1. コードは少し冗長になり、冗長で繰り返されるコードと文字列が削除されます。
  2. コードはより一般的/再利用可能になりました。
  3. キャッシュをオブジェクトにして、自己完結型のインターフェイスを持ち、グローバルを減らします。
  4. .src属性がDOM要素ではなく、適切に機能するようにします。

コード：

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");

このオブジェクト指向で乾燥したアプローチのいくつかの利点：

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

追伸DRYが何を表しているのかわからない場合、それは "自分自身を繰り返さない"ことであり、基本的には、似たようなコードのコピーを多く持つべきではないことを意味します。ループや関数、または同じように見えるコードのコピーの多くの必要性を排除する何かに何らかの形で削減されます。最終結果は小さくなり、通常、保守が容易になり、再利用可能になります。

3
jfriend00

これは簡単な例であり、いくつかの変更を使用してそれをあなたのものと組み合わせてみてください。コードを読みやすく短くするために、すべての画像を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);
3
hakim

問題は次のとおりです。

if(imgArray[i] == img)

配列要素をDOMオブジェクトと比較しています。

2
Diodeus - James MacFarlane