Отображение изображения из массива изображений - Javascript

Ответ 1

Так же, как сказал Диодей, вы сравниваете 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;
        }
    }
}

Ответ 2

Кроме того, при проверке последнего изображения вы должны сравнивать с imgArray.length-1, потому что, например, когда длина массива равна 2, тогда я буду принимать значения 0 и 1, он не достигнет значения 2, поэтому вы должен сравниваться с длиной-1 не с длиной, вот фиксированная линия:

if(i == imgArray.length-1)

Ответ 3

Вот несколько более чистый способ реализации этого. Это приводит к следующим изменениям:

• Код DRYed немного для удаления избыточного и повторяющегося кода и строк.
• Код становится более универсальным/многоразовым.
• Мы делаем кеш в объект, поэтому он имеет автономный интерфейс и меньше глобальных переменных.
• Мы сравниваем атрибуты .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");

Некоторые преимущества этого более объектно-ориентированного и DRYed-подхода:

• Вы можете добавить больше изображений, просто создав изображения в числовых последовательностях и изменив одно числовое значение в конструкторе, а не копируя больше строк объявлений массива.
• Вы можете использовать это более одного места в своем приложении, просто создав несколько объектов imageCache.
• Вы можете изменить базовый URL, изменив одну строку, а не N строк.
• Размер кода меньше (из-за удаления повторяющегося кода).
• Объект кеша можно легко расширить, чтобы предложить больше возможностей, таких как first, last, skip и т.д.
• Вы можете добавить централизованную обработку ошибок в одном месте, поэтому, если одно изображение не существует и не загружается успешно, оно автоматически удаляется из кэша.
• Вы можете повторно использовать это на других веб-страницах, которые вы разрабатываете, только изменяя аргументы конструктору и не изменяя в действительности код реализации.

P.S. Если вы не знаете, что означает DRY, это "Do not Repeat Yourself" и в основном означает, что у вас никогда не должно быть много копий аналогичного кода. Каждый раз, когда вы это делаете, его нужно как-то сводить к циклу или функции или что-то, что устраняет необходимость в большом количестве похожих копий кода. Конечный результат будет меньше, обычно легче поддерживать и часто более многократно использовать.

Ответ 4

Это простой пример и попытайтесь объединить его с вашим, используя некоторые модификации. Я предпочитаю, чтобы вы установили все изображения в одном массиве, чтобы сделать код более понятным и коротким:

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

Ответ 5

Вот ваша проблема:

if(imgArray[i] == img)

Вы сравниваете элемент массива с объектом DOM.

Ответ 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>
}
}