Wyświetlanie obrazu z tablicy obrazów - Javascript

Question

Mam duży obraz, który jest wyświetlany na mojej stronie głównej, a gdy użytkownik kliknie przycisk "next_img", duży obraz na stronie głównej powinien zmienić się na następny obraz w tablicy .

Jednak następna strzałka po kliknięciu nic nie robi, a główny obraz na stronie głównej się nie zmienia.

Potrzebuję zrobić to w javascript.

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

A następnie w pliku 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; 
     } 
    } 
} 

Każda pomoc będzie mile widziane. Dzięki.

Answer 1

Tak jak powiedział Diodeus, porównujesz Image z HTMLDomObject. Zamiast porównać ich .src atrybut:

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

Oto problem:

if(imgArray[i] == img) 

Ty porównując element tablicy do obiektu DOM.

Answer 3

Oto nieco czystszy sposób realizacji tego. Spowoduje to wprowadzenie następujących zmian:

1. Kod jest trochę przesuszony, aby usunąć nadmiarowy i powtarzający się kod i ciągi.
2. Kod jest bardziej ogólny/wielokrotnego użytku.
3. Doprowadzamy pamięć podręczną do obiektu, dzięki czemu ma on niezależny interfejs i jest mniej globów.
4. Porównujemy atrybuty .src zamiast elementów DOM, aby działało poprawnie.

Kod:

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

pewne zalety tej bardziej zorientowane obiektowo i wysuszone podejście:

1. Można dodać kolejne obrazy tylko tworzenie obrazów w sekwencji numerycznych i zmianę jednego numeryczną wartość w konstruktorze zamiast kopiować dużo więcej wierszy deklaracji tablicy.
2. Możesz użyć tego więcej niż jednego miejsca w swojej aplikacji, tworząc po prostu więcej niż jeden obiekt imageCache.
3. Możesz zmienić podstawowy adres URL, zmieniając jeden ciąg znaków zamiast N ciągów.
4. Rozmiar kodu jest mniejszy (z powodu usunięcia powtarzającego się kodu).
5. Obiekt pamięci podręcznej można łatwo rozszerzyć, oferując więcej możliwości, takich jak pierwszy, ostatni, pominięcie, itp ...
6. Można dodać centralizację obsługi błędów w jednym miejscu, więc jeśli jeden obraz nie istnieje i nie ładuje się pomyślnie, jest automatycznie usuwany z pamięci podręcznej.
7. Możesz ponownie użyć tego w innych rozwijanych stronach internetowych, zmieniając tylko argumenty konstruktora i nie zmieniając kodu implementacji.

P.S. Jeśli nie wiesz, co oznacza DRY, oznacza to, że "nie powtarzaj się" i oznacza to, że nigdy nie powinieneś mieć wielu kopii podobnego kodu. Za każdym razem, gdy to masz, powinno zostać w jakiś sposób zredukowane do pętli lub funkcji lub czegoś, co eliminuje potrzebę posiadania wielu podobnie wyglądających kopii kodu. Końcowy wynik będzie mniejszy, zwykle łatwiejszy do utrzymania i często bardziej wielokrotnego użytku.

Answer 4

Ponadto, podczas sprawdzania ostatniego obrazu, należy porównać z imgArray.length-1, ponieważ na przykład, gdy długość tablicy wynosi 2, wtedy przyjmę wartości 0 i 1, to nie osiągnie wartości 2, więc musisz porównać z długością-1 nie z długości, tutaj jest stacjonarna:

if(i == imgArray.length-1) 

Answer 5

to jest prosty przykład i spróbować połączyć je z naszą pomocą kilku modyfikacji. Wolę ustawić wszystkie obrazy w jednej tablicy, aby uczynić swój kod łatwiejsze do odczytania i krótsze:

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