Tạo Slide show ảnh, tin tức với jQuery Cycle

**vuanh_tuan** · 111/08/12, 10:25 pm

vuanh_tuan
Mem Cấp 1

Tổng số bài gửi : 18

Điểm tích lũy : 42

Ngày gia nhập : 08/03/2012

Đến từ : Nghệ An

Tạo Slide show ảnh, tin tức với jQuery Cycle

Có rất nhiều Plugin của jQuery giúp chúng ta tạo ra slideshow nhanh chóng với nhiều hiệu ứng đẹp. Một trong số đó là jQuery Cycle.

jQuery cycle là một plugin gọn nhẹ giúp chúng ta tạo ra các slideshow động trên trang web với nhiều hiệu ứng đẹp, không chỉ tạo ra slide hình ảnh, jQuery cycle có thể slide bất cứ phần tử html nào mà bạn muốn, như một đoạn văn bản chẳng hạn…

Hôm nay chúng ta sẽ sử dụng jQuery cycle để tạo Slideshow hình ảnh như sau:

Tạo Slide show ảnh, tin tức với jQuery Cycle Tao-slideshow-voi-jquery-cycle

Tạo Slide show ảnh, tin tức với jQuery Cycle Tao-slideshow-voi-jquery-cycle

Slideshow hình ảnh với jQuery cycle plugin
PS: Bổ sung Slide tin tức giống Zing.VN, nếu bạn quan tâm có thể xem demo và Download

DEMO
DEMO SLIDE TIN TUC

Download Demo (102.3 KB)
Download Demo Slide tin tức (206.1 KB)

Lưu ý: jQuery cycle là một plugin của jQuery, nên để chạy được plugin này bạn cần thư viện jQuery, nếu chưa có bạn có thể vào jquery.com để Download

1, Tiếp theo bạn Download jQuery cycle tại đây: http://malsup.com/jquery/cycle/download.html

2, Chèn thư viện jQuery và jQuery cycle vào thẻ <head> của website

Code:: <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script>

3, Trong thành phần <body> của HTML chúng ta tạo mã HTML của Slideshow như sau:

Code:: <div id="slide"> <img src="imgs/1.jpg" alt="Picture 1" /> <img src="imgs/2.jpg" alt="Picture 2" /> <img src="imgs/3.jpg" alt="Picture 3" /> <img src="imgs/4.jpg" alt="Picture 4" /> <img src="imgs/5.jpg" alt="Picture 5" /> </div> <div id="slide-nav"></div>

jQuery cycle sẽ chọn các thành phần là con của <div id=”slide”> (không phải thành phần cháu trong cấu trúc DOM) để đưa vào vòng lặp. Ở đây chúng ta chọn được 5 thành phần <img> để tạo slide.

Thành phần <div id=”slide-nav”> là nơi chúng ta sẽ hiện thị phân trang (paging) của Slideshow, phân trang này sẽ tự động thêm vào tương ứng với số lượng hình ảnh của chúng ta

4, Tiếp tục thêm đoạn mã sau trong thẻ <head> để tạo slider:

Code:: <script type="text/javascript"> $(document).ready(function(){ $("#slide").cycle({ //Các tùy chọn của jQuery cycle fx: 'fade', //Hiệu ứng speed: 1000, //Tốc độ diễn ra hiệu ứng 1/1000s timeout: 3000, //Thời gian thay đổi giữa các trong 3s pager: '#slide-nav' //Tạo phân trang }); }); </script>

Bạn có thể xem các tùy chọn của jQuery cycle tại đây: http://jquery.malsup.com/cycle/options.html
Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html

5, Cuối cùng, thêm một chút CSS để dịnh dạng Slideshow, mình sẽ không đề cập nhiều đến CSS, bạn có thể định dạng theo ý bạn, chỉ lưu ý một chút:

- Slideshow (div id=”slide”) sẽ có position là relative
- Các Slide (<img>) sẽ có position là absolute

Mã CSS cho demo trên:

Code:: * { margin: 0; padding: 0 } body { font: 14px arial } #wrapper { width: 800px; margin: 0 auto; margin-top: 50px } #slide, #slide-nav {background: #000; padding: 10px; width: 480px; height: 195px} #slide img { top: 10px !important; left: 10px !important } #slide-nav {height: 20px} #slide-nav a{ background: #eee; margin-right: 4px; padding: 1px 5px; text-decoration: none; border: 2px solid green; color: green} #slide-nav a.activeSlide{background: green; color: #fff}

KẾT LUẬN
Qua bài học này chúng ta đã tạo được một slideshow hình ảnh rất nhanh chóng với jQuery cycle plugin.
Bạn có thể truy cập http://jquery.malsup.com/cycle/ để xem nhiều demo hơn và tìm hiểu thêm về plugin này, chúc bạn sẽ có nhiều ứng dụng thú vị với nó.

Tagged as: jQuery, jquery cycle, slide tin tuc, slider, slideshow

Nguồn: ewebvn.com

111/08/12, 10:25 pm