Hiển thị hình ảnh từ một loạt hình ảnh - Javascript

Question

Tôi có một hình ảnh lớn được hiển thị trên trang chủ của tôi và khi người dùng nhấp vào nút "next_img", hình ảnh lớn trên trang chủ sẽ thay đổi thành hình ảnh tiếp theo trong mảng .

Tuy nhiên, mũi tên tiếp theo khi được nhấp sẽ không làm gì và hình ảnh chính trên trang chủ không thay đổi.

Tôi cần làm điều này trong javascript.

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

Và sau đó trong tập tin 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; 
     } 
    } 
} 

Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn.

Answer 1

Cũng giống như Diodeus đã nói, bạn đang so sánh số Image với số HTMLDomObject. Thay vào đó, hãy so sánh thuộc tính .src của chúng:

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

Dưới đây là vấn đề của bạn:

if(imgArray[i] == img) 

Bạn đang so sánh một phần tử mảng đến một đối tượng DOM.

Answer 3

Đây là cách thực hiện điều này một cách rõ ràng hơn. Điều này thực hiện các thay đổi sau:

1. Mã được loại bỏ một chút để xóa mã và chuỗi thừa và lặp lại.
2. Mã được thực hiện chung chung/tái sử dụng hơn.
3. Chúng tôi tạo bộ nhớ cache thành một đối tượng để nó có giao diện độc lập và có ít hình cầu hơn.
4. Chúng tôi so sánh các thuộc tính .src thay vì các phần tử DOM để làm cho nó hoạt động bình thường.

Code:

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

Một số ưu điểm của đối tượng hơn này định hướng và cách tiếp cận DRYed:

1. Bạn có thể thêm hình ảnh bằng cách chỉ tạo ra những hình ảnh trong các chuỗi số và thay đổi một số giá trị trong hàm tạo thay vì sao chép nhiều dòng khai báo mảng hơn.
2. Bạn có thể sử dụng nhiều địa điểm này trong ứng dụng của mình bằng cách chỉ cần tạo nhiều hơn một đối tượng imageCache.
3. Bạn có thể thay đổi URL cơ sở bằng cách thay đổi một chuỗi thay vì chuỗi N.
4. Kích thước mã nhỏ hơn (do loại bỏ mã lặp lại).
5. Đối tượng bộ nhớ cache có thể dễ dàng mở rộng để cung cấp nhiều khả năng hơn như trước, cuối, bỏ qua, v.v.
6. Bạn có thể thêm xử lý lỗi tập trung ở một nơi để một hình ảnh không tồn tại và không tải thành công, nó sẽ tự động bị xóa khỏi bộ nhớ cache.
7. Bạn có thể sử dụng lại điều này trong các trang web khác mà bạn phát triển bằng cách chỉ thay đổi đối số cho hàm tạo và không thực sự thay đổi mã triển khai.

P.S. Nếu bạn không biết DRY là gì, đó là "Don't Repeat Yourself" và về cơ bản có nghĩa là bạn sẽ không bao giờ có nhiều bản sao của mã tìm kiếm tương tự. Bất cứ lúc nào bạn có điều đó, nó phải được giảm bằng cách nào đó để một vòng lặp hoặc chức năng hoặc cái gì đó loại bỏ sự cần thiết cho rất nhiều bản sao tương tự như tìm kiếm mã. Kết quả cuối cùng sẽ nhỏ hơn, thường dễ bảo trì hơn và thường tái sử dụng hơn.

Answer 4

Ngoài ra, khi kiểm tra hình ảnh cuối cùng, bạn phải so sánh với imgArray.length-1 vì, ví dụ, khi chiều dài mảng là 2 thì tôi sẽ lấy giá trị 0 và 1, nó sẽ không đạt giá trị 2, vì vậy bạn phải so sánh với độ dài-1 không có chiều dài, đây là dòng cố định:

if(i == imgArray.length-1) 

Answer 5

Đây là ví dụ đơn giản và cố gắng kết hợp nó với bạn bằng cách sử dụng một số sửa đổi. Tôi thích bạn đặt tất cả những hình ảnh trong một mảng để làm cho mã của bạn dễ đọc hơn và ngắn hơn:

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