Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Đang tải...

Thứ Năm, ngày 10 tháng 11 năm 2011

Tạo Slide Image bằng jcarousel Plugin của jquery


Nguồn vnhow

Trong hướng dẫn này, mình sẽ sử dụng jQuery với Plugin jCarousel để  hiển thị slide các hình nhỏ và chú thích. Hình thu nhỏ có thể được cuộn với việc sử dụng các nút trước và sau khi bất kỳ hình ảnh thu nhỏ, các chú thích hoặc tiêu đề của hình nhỏ sẽ trượt lên.

Để thao tác bạn làm như sau: 

1. Tải jCarousel pulugin tại địa chỉ: http://sorgalla.com/projects/download-zip.php?jcarousel

2. Giải nén tập tin vừa tải, copy 2 thư mục lib(chứa thư viện javascript) và skins(chứa các giao diện cho slide) vào thư mục web của bạn.

3. Đặt đoạn mã sau vào thẻ <head> của trang web để load các thư viện javascript và css.

<!--
jQuery library
-->
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>


5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.

<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="images/image1.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image2.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image3.jpg" width="75" height="75" alt="" /></li>
<li><img src="images/image4.jpg" width="75" height="75" alt="" /></li>
</ul>
6. Và kết quả hiển thị slide trên trang web.
Share/Save/Bookmark

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa
Top