Как просматривать изображения по клику?

Question

Я пытаюсь получить изображение, чтобы перебирать другие изображения (и цикл) при нажатии (без учета времени). У меня он работает для одного изображения с этим кодом:

<script> 
    var NumberOfImages = 2 

    var img = new Array(NumberOfImages) 

    img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png" 
    img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png" 

    var imgNumber = 0 

    function NextImage() 
    { 
     imgNumber++ 
     if (imgNumber == NumberOfImages) 
      imgNumber = 0 
     document.images["VCRImage"].src = img[imgNumber] 
    } 
</script> 

<A HREF="javascript:NextImage()"> 
<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0></A> 

Моя проблема заключается в том, что я не уверен, как поместить второе изображение и иметь его цикл с помощью различных изображений. Я пробовал дублировать JavaScript и HTML и изменять «VCRImage» на втором имени, но не повезло.

Answer 1

Я надеюсь, что вы считаете этот ответ полезным, и рассмотреть вопрос о принятии его.

Глядя на ваш код, я сделал несколько модификаций, чтобы запустить это для вас. Сначала они могут показаться немного резкими, но если вы потратите время, чтобы понять их, вы увидите преимущества.

• Сначала я снял элементы анкера. Вы использовали их для простого подключения событий кликов. Гораздо более предпочтительный способ сделать это запрос для элементов в JavaScript и привязать прослушиватели событий к каждому из них. Удалив анкеры, я также потерял указатель, когда пользователь наводил на изображение изображение, чтобы исправить это, я добавил класс CSS, который дает тот же эффект.
• Далее я помещаю каждый элемент изображения в функцию закрытия, чтобы каждое изображение имело доступ к своей собственной переменной счетчика. Когда событие клика поднимается, переменная счетчика, находясь за пределами области анонимной функции, имеет доступ к захваченному элементу счетчика. Позволяет ему свободно обновлять его.

Я прокомментировал код, где может быть путаница. Если у вас есть какие-либо вопросы, оставьте комментарий.

HTML:

<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0> 

<IMG SRC="http://2.bp.blogspot.com/-8ChQ3SBxYOY/U9bSBt4bcMI/AAAAAAAARDE/zLDJ1kP903A/s1600/1.png" name="VCRImage" BORDER=0> 

CSS:

img[name=VCRImage]:hover 
{ 
    cursor:pointer; 
} 

JavaScript:

//Declare an image array same as calling new Array(); 
    var img = [] 
    img[0] = "http://2.bp.blogspot.com/-DNISePZjJ4g/U9bSB5NjEzI/AAAAAAAARCw/K7OGOPjQd0Q/s1600/2.png"; 
    img[1] = "http://4.bp.blogspot.com/-MoL1MHN12Eo/U9bSB6EIS-I/AAAAAAAARCs/gUSKbzsg05g/s1600/3.png"; 

    //Select all elements on the page with the name attribute equal to VCRImage 
    var images = document.querySelectorAll('[name=VCRImage]'); 

    //For each image bind the click event 
    for(var i=0; i < images.length; i++) 
    { 
     var image = images[i]; 
     //https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener 
     image.addEventListener('click', imageClicked(), false); 
    } 

    function imageClicked() 
    { 
     //Use a closure to wrap the counter variable 
     //so each image element has their own unique counter 
     var counter = 0; 
     return function(event) 
     { 
     //Increment counter 
     counter++; 
     //The context of "this" is the image element 
     //Use a modulus 
     this.src = img[counter % img.length]; 
     } 
    } 

в действии ее е: http://jsbin.com/veqakame/1/edit

Update: Чтобы сделать изображение отрабатывают свои собственные наборы альтернативного образа Я создал свойство данных altimage на элементе. Значению этого атрибута присваивается набор источников изображений с разделителями-запятыми, которые будет использоваться при щелчке изображения.

http://jsbin.com/qiridote/1/edit