Nếu không sử dụng jquery, làm thế nào để chuyển qua hình ảnh để thực hiện một slideshow đơn giản

Question

Bạn có một div, với 3 hình ảnh trong đó.

Cách tạo trình chiếu đơn giản xoay vòng qua hình ảnh và hiển thị từng hình ảnh trong 5 giây và quay trở lại hình ảnh đầu tiên khi hoàn thành và tiếp tục lặp.

Không sử dụng jquery hoặc bất kỳ khung công tác nào khác.

Answer 1

Vâng, bạn sẽ phải có được một xử lý cho <div> đầu tiên, vì vậy nếu nó có một "id" giá trị:

var theDiv = document.getElementById("imgContainer"); 

Bây giờ bạn chỉ cần thiết lập một bộ đếm thời gian để lướt qua những hình ảnh :

(function(div, sleep) { 
    var idx = 0; 
    var imgs = div.getElementsByTagName('img'); 
    function showOne() { 
    for (var i = 0; i < imgs.length; ++i) 
     imgs[i].style.display = 'none'; 
    imgs[idx].style.display = ''; 
    idx = (idx + 1) % imgs.length; 
    setTimeout(showOne, sleep); 
    } 

    showOne(); 
})(theDiv, 5000); 

Answer 2

Bạn có thể sử dụng setInterval để thiết lập các cuộc gọi lại theo thời gian, và thiết lập các src của một img yếu tố:

window.onload = function() { 
    var slides = [ "path_to_image_one", 
        "path_to_image_two", 
        "path_to_image_three" // ... 
       ], 
     index = 0, 
     timer = 0; 

    // Show the first slide 
    showNextSlide(); 

    // Show "next" slide every five seconds 
    timer = setInterval(showNextSlide, 5000); 

    // The function we call to show the "next" slide  
    function showNextSlide() { 
     if (index >= slides.length) { 
      index = 0; 
     } 
     document.getElementById('theImage').src = slides[index++]; 
    } 
}; 

... nơi đánh dấu của bạn cho hình ảnh là:

<img id="theImage" src="path_to_initial_placeholder"> 

Lưu ý rằng tôi đã lưu trữ bộ đếm thời gian xử lý trong timer nhưng không được sử dụng nó. Điều này chỉ vì bạn có thể sử dụng nó để hủy hẹn giờ nếu bạn cần dừng trình chiếu.

Cập nhật: Chỉ cần thấy rằng bạn muốn lấy hình ảnh từ div ở đâu đó (trong khi ở trên tôi đã cung cấp đường dẫn trong chính mã). Đủ đơn giản để tạo slides động; phiên bản sửa đổi của các bên trên mà lấy những hình ảnh đó là trực tiếp con của div với ID "theDiv":

window.onload = function() { 
    var slides = [], 
     index = 0, 
     timer = 0, 
     node; 

    // Get the slides 
    for (node = document.getElementById('theDiv').childNodes; 
     node; 
     node = node.nextSibling) { 
     if (node.nodeType == 1 && node.tagName == "IMG") { 
      slides.push(node.src); 
     } 
    } 

    // Show the first slide 
    showNextSlide(); 

    // Show "next" slide every five seconds 
    timer = setInterval(showNextSlide, 5000); 

    // The function we call to show the "next" slide  
    function showNextSlide() { 
     if (index >= slides.length) { 
      index = 0; 
     } 
     document.getElementById('theImage').src = slides[index++]; 
    } 
}; 

Answer 3

var image = new Array('/img/1.jpg', '/img/2.jpg', '/img/3.jpg'); 

setTimeout("show_next()",5000); 

function show_next() 
{ 
var container = document.getElementById('image_container'); 
container.innerHTML = "<img src='" + image[i] + "' />"; 
if(i==2) { i = 1; }else { i = i + 1; } 
} 

Answer 4

(function() { 
    var imgs = document.getElementById('your_div').getElementsByTagName('img'), 
     index = 0; 
    imgs[0].style.display = 'block'; 
    setInterval(function() { 
     imgs[index].style.display = 'none'; 
     index = (index + 1) % imgs.length; 
     imgs[index].style.display = 'block'; 
    }, 5000); 
}()); 

HTML mẫu: http://jsfiddle.net/Zq7KB/1/

Sửa: Nhìn thấy một ví dụ thanh lịch hơn ở trên sử dụng .length.

Answer 5

Tôi nghĩ đây là một câu trả lời đơn giản, nhưng có một vài lỗi. setInterval thay vì setTimeout và chỉ mục ban đầu chưa được đặt. Tôi cũng sửa đổi để tải hình ảnh đầu tiên ngay lập tức.

var image = new Array('imgs/18/P1050294-XL.jpg', 'imgs/18/P1050293-XL.jpg', 'imgs/18/P1040984-XL.jpg', 'imgs/18/P1040983-XL.jpg', 'imgs/18/P1040982-XL.jpg'); 

var path = 'mypath'; 

document.getElementById('slideShow').innerHTML = "<img width='600px' src='" + path + image[0] + "' />" // Load First image 
var i = 1; // Set counter to second image, for first use of loop 

setInterval("show_next(path)",5000); 

function show_next(path) 
{ 
var container = document.getElementById('slideShow'); 
container.innerHTML = "<img width='600px' src='" + path + image[i] + "' />"; 
if(i==4) { i = 0; } else { i = i + 1; } 
}