Отображение изображения из массива изображений - 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>

А затем в файле 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;
        }
    }   
}

Любая помощь будет оценена.Спасибо.

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

Answer 2

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

if(i == imgArray.length-1)

Answer 3

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

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 4

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

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. Вы можете добавить больше изображений, просто создав изображения в числовых последовательностях и изменив одно числовое значение в конструкторе, а не скопировав намного больше строк объявлений массива.
2. Вы можете использовать это более одного места в своем приложении, просто создав более одного объекта imageCache.
3. Вы можете изменить базовый URL, изменив одну строку вместо N строк.
4. Размер кода меньше (из-за удаления повторяющегося кода).
5. Объект кэша может быть легко расширен, чтобы предложить больше возможностей, таких как first, last, skip и т.д ...
6. Вы можете добавить централизованную обработку ошибок в одном месте, поэтому, если одно изображение не существует и не загружается успешно, оно автоматически удаляется из кэша.
7. Вы можете повторно использовать это на других веб-страницах, которые вы разрабатываете, только изменив аргументы конструктора и фактически не изменив код реализации.

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

Answer 5

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

if(imgArray[i] == img)

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

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