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.htmlCODE
<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ư sauCODE
<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 sliderCODE
<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 CSSCODE
* { 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}
Không có nhận xét nào:
Đăng nhận xét