Hướng dẫn cách làm Slideshow ảnh đơn giản với jQuery

Hôm nay HHV hướng dẫn các bạn cách làm slideshow ảnh đơn giản với jQuery. Thực tế có rất nhiều cách làm sileshow ảnh từ đơn giản tới phức tạp… tuy nhiên HHV vẫn viết bài này chủ yếu bởi vì đây là cách làm sildeshow đơn giản nhất mà HHV biết được và đã ứng dụng nó trong Metro Magazine Blogger Templates. Phần code của nó dễ đọc đến nỗi một người chưa biết gì về JS cũng có thể hiểu được nó; rất phù hợp với tiêu chí “Thiết kế web nghiệp dư cho người mới bắt đầu” :)

Live Demo

1. Code HTML

Để cho đơn giản thì chèn 3 tấm ảnh với thẻ <img> và bao quanh nó bằng một thẻ <div>. Để dễ dàng định dạng và trang trí ta gán thêm một id=”slideshow”. Cuối cùng ta có đoạn mã HTML

Data provided by Pastebin.com - Download Raw - See Original

<div id="slideshow">
     <img src="img/img1.jpg" alt="" class="active" />
     <img src="img/img2.jpg" alt="" />
     <img src="img/img3.jpg" alt="" />
</div>

Điểm đặc biệt cần chú ý là nếu muốn tấm ảnh nào xuất hiện đầu tiên thì gán cho class=”active”

2. Code CSS

Data provided by Pastebin.com - Download Raw - See Original

#slideshow {
    position:relative;
    height:350px;
}
 
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
 
#slideshow IMG.active {
    z-index:10;
}
 
#slideshow IMG.last-active {
    z-index:9;
}

Những điểm cần chú ý ở đoạn mã trên là chiều cao của Slideshow được tùy chỉnh tùy theo vị trí đặt code và các bức ảnh… Khi xem xét sâu ta thấy đoạn mã trên còn quy định tọa độ của các bức ảnh trong không gian 3 chiều… Thuộc tính z-index quy định thứ tự xếp lớp các bức ảnh. Có 3 lớp, lớp cao nhất – active (10), lớp kế tiếp active (9) và tất cả các ảnh còn lại (8).

3. Code JS

Bây giờ chúng ta bắt đầu viết một đoạn mã để bắt slideshow của mình chuyển động.

Data provided by Pastebin.com - Download Raw - See Original

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    
 
    $next.addClass('active');
 
    $active.removeClass('active');
}
 
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Đoạn mã trên có ý nghĩa như sau: Đầu tiên khai báo biến, bức ảnh nào có class active thì gán biến $active và đứng đầu, bức ảnh kế nó là biến $next. Bắt đầu chạy hàm SlideSwitch. Bức ảnh $next được gắn class active để đem nó lên trên hết và bức ảnh đang $active thì bị gỡ bỏ class active để hạ xuống. Cuối cùng định khoảng thời gian 5000ms (5s) giữa mỗi lần chuyển đổi. Rất đơn giản!

Để cho đẹp mắt ta tạo thêm hiệu ứng mờ ảo fade.

Data provided by Pastebin.com - Download Raw - See Original

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();
 
    $active.addClass('last-active');
 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Ở đây xuất hiện thêm một class  last-active, class này đã được khai báo ở phần code css với duy nhất một thuộc tính là z-index: 9.
Đoạn code trên được hiểu như sau: Bức ảnh có class active (đang ở trên cùng) sẽ bị gán class last-active (hạ xuống 1 bậc). Bức ảnh ở ngay dưới nó thì được gán class active (nâng lên một bậc ) đồng thời thêm vào hiệu ứng animate với độ mờ tăng dần từ 0 đến 1. Cuối cùng gỡ bỏ class last-active đưa bức ảnh trên cùng lúc ban đầu xuống dưới cùng.
Quá trình này được lặp đi lặp lại với chu kỳ 5s.

Kết luận

Như đã nói có nhất nhiều cách làm Slideshow ảnh với jQuery phức tạp hơn và đẹp hơn rất nhiều. Nhưng vấn đề là ở chỗ những slideshow này sẽ nặng nề và khó chỉnh sửa tùy biến hơn rất nhiều. Quan điểm của HHV vẫn là làm thế nào sử dụng cách thức đơn giản nhất để đạt được hiệu quả cao nhất. Để đạt được điều này chỉ có một cách là thấu hiểu mình đang làm gì.
Hy vọng với bài hướng dẫn này các bạn có thể hiểu và tùy chỉnh slideshow theo ý của mình. VD như chỉnh sửa kích thước slideshow, thời gian hiển thị từng bức ảnh, độ mờ ảo, chèn thêm liên kết cho từng bức ảnh và thâm chí là kết hợp nó với Recent Posts  Widget.
Chúc các bạn sáng tạo và thành công.
Hồng Hòa Vi
http://blog.nguoiaolam.net

Share This:

Tags:

Lập trình web Tin học

• Prevoius
• Next