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

Đâ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.