RSSJquery

Tạo Slideshow với jQuery cycle

Nhân tiện có bạn email nhờ mình làm demo Slide hình ảnh nên post lên đây để chia sẻ với mọi người 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 …

Nhân tiện có bạn email nhờ mình làm demo Slide hình ảnh nên post lên đây để chia sẻ với mọi người

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:

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

XEM DEMO   Xem Demo Slide tin tức (Zing)

  Download Demo (102.3 KiB, 2,478 Lượt tải)

  Download Demo Slide tin tức (206.1 KiB, 2,210 Lượt tải)

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

<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:

<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:

<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:

* { 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ó.

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đ��u