1on 11/08/12, 10:25 pm

vuanh_tuan
Mem Cấp 1

vuanh_tuan
Mem Cấp 1

Tạo Slide show ảnh, tin tức với jQuery Cycle Empty 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
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

« Xem bài viết trước  |  Xem bài viết kế tiếp »

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Báo cáo lạm dụng | Thảo luận mới nhất