JavaScript, jQuery

Tạo một slideshow đơn giản sử dụng jQuery

Posted on by Đỗ Thành
slideshow
08
Th4
View: 62

Đây là một ví dụ về cách tạo một slideshow đơn giản sử dụng jQuery:

HTML

<div class="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS

.slideshow {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  display: none;
  width: 100%;
}

jQuery

$(document).ready(function() {
  var images = $('.slideshow img');
  var currentImage = 0;

  setInterval(function() {
    images.eq(currentImage).fadeOut(1000);
    currentImage = (currentImage + 1) % images.length;
    images.eq(currentImage).fadeIn(1000);
  }, 5000);
});

Giải thích:

  • HTML: Chứa các hình ảnh được sử dụng trong slideshow.
  • CSS: Thiết lập kích thước của slideshow và ẩn các hình ảnh.
  • JavaScript:
    • Lấy danh sách các hình ảnh và thiết lập biến currentImage bằng 0 để bắt đầu slideshow từ hình ảnh đầu tiên.
    • Sử dụng setInterval để thực hiện việc chuyển đổi giữa các hình ảnh sau mỗi 5 giây.
    • Ẩn hình ảnh hiện tại và hiển thị hình ảnh tiếp theo bằng cách sử dụng phương thức fadeOut và fadeIn. Sử dụng toán tử % để lặp lại slideshow khi đã đến hình ảnh cuối cùng.

Lưu ý rằng đây là một ví dụ đơn giản và bạn có thể tùy chỉnh để tạo ra một slideshow phức tạp hơn với nhiều hiệu ứng và tính năng khác.

Đỗ Thành