Query 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, sử dụng jquery cycle để tạo slide hình ảnh
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…
Chúng ta sẽ sử dụng jQuery cycle để tạo Slideshow hình ảnh như sau:
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
- Tiếp theo bạn Download jQuery cycle tại đây: http://malsup.com/jquery/cycle/download.html CODE
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script> - Chèn thư viện jQuery và jQuery cycle vào thẻ <head> của website
- 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
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 - Tiếp tục thêm đoạn mã sau trong thẻ <head> hoặc bất cứ đâu bạn muốn để 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> - 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 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}
0 nhận xét :
Đăng nhận xét