Đâ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ấy danh sách các hình ảnh và thiết lập biến
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.