• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng trượt hình ảnh xoay vòng sử dụng jQuery

5
19/11/2010

Tiny Circleslider là một plugin jQuery tạo ra hiệu ứng xoay tròn hình ảnh.


Hãy ghé qua trang nhà của tác giả hiệu ứng này để tìm hiểu thêm. Ở đây tôi xin giới thiệu cách thực hiện một trong những ví dụ minh họa cho hiệu ứng này.

Xem Demo.

1. Trước tiên, đặt phần css và js dưới đây vào trước thẻ </head>.

<style type='text/css'>
#rotatescroll{height:300px;position:relative;width:300px}
#rotatescroll .viewport{height:300px;position:relative;margin:0 auto;overflow:hidden;width:300px}
#rotatescroll .overview{ left:0;list-style:none;margin:0;padding:0;position:absolute;top:0}
#rotatescroll .overview li{ float:left;height:300px;position:relative;width:300px}
#rotatescroll .overlay{ background:transparent url(http://3.bp.blogspot.com/_hljKDuw-cxQ/TOAzYymNcsI/AAAAAAAARJE/BhUMn0x75e0/s00/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(http://2.bp.blogspot.com/_hljKDuw-cxQ/TOAzZDwIQpI/AAAAAAAARJI/MSMMLAWC22k/s00/bg-thumb.png) no-repeat 0 0;cursor:pointer;height:26px;left:137px;position:absolute;top:-3px;width:26px;z-index:200}
#rotatescroll .dot{ background:transparent url(http://2.bp.blogspot.com/_hljKDuw-cxQ/TOAzYen764I/AAAAAAAARJA/5rL5nmoOiBU/s00/bg-dot.png) no-repeat 0 0;display:none;height:12px;left:155px;position:absolute;top:3px;width:12px;z-index:100}
#rotatescroll .dot span{ display:none}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

<script scr='http://baijs.nl/tinycircleslider/js/jquery.tinycircleslider.min.js' type='text/javascript'/>
2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web/blogspot.
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL_hinh 1" /></li>
<li><img src="URL_hinh 2" /></li>
<li><img src="URL_hinh 3" /></li>
<li><img src="URL_hinh4" /></li>
<li><img src="URL_hinh5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
Bạn cần đưa liên kết các hình ảnh vào cấu trúc nêu trên.

Để hiệu ứng hoạt động thì cần đặt đoạn js bên dưới vào phía sau phần HTML.

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>

Nếu muốn hiệu ứng trượt tự động thì điều chỉnh js lại như sau:

$(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true });

{5 bình luậnAdd yours ?}

13:24:00, 13 thg 1, 2011

Bạn có thế chỉ mình tạo liên kết menu không mình sẽ làm lại.bạn chỉ mình nhé.
www.xaydungdaihocbinhduong.tk
mình click qua menu khác thì nó là
http://www.tinbdsxddhbd.blogspot.com
nhờ bạn chỉ giùm mình.xin cảm ơn.mình rất cần tư vấn.

Reply
13:49:00, 13 thg 1, 2011

Thực sự liên kết menu quá cơ bản mà viết bài cũng k có hứng lắm. Bạn cứ tìm mấy bài viết về menu trên blog mà thực hiện theo. Còn muốn liên kết đến trang nào thì chỉ cần đăng 1 bài viết về trang đó, ví dụ một trang có tên là Giới thiệu thì bạn nên tạo một bài viết có tiêu đề là Gioi thieu hoặc Introduction sau đó xuất bản bài đăng. Liên kết của trang này có dạng /2011/01/gioi-thieu.html hoặc /2011/01/introduction.html. Bạn copy liên kết của trang trên thanh địa chỉ công cụ trình duyệt rồi đưa vào cấu trúc menu. Nói thật là quá dễ dàng

Reply
16:34:00, 13 thg 1, 2011

@thanhnewcc:Mình xem thử trên menu của bạn rồi mình thấy mỗi một nhãn menu bạn lại lập một blogspot để làm nội dung nhãn đó
Như
http://www.tinxddhbinhduong.blogspot.com/
http://www.phongthuyxddhbd.blogspot.com/
Sao làm cái menu mà bạn phải lập nhiều blog thế.Còn về liên kết menu thì do ten mien .tk chỉ trỏ về một địa chỉ blogspot do bạn cài đặt thôi còn các địa chỉ khác không hiển thị là đương nhiên rồi.Cách sửa chữa là bạn làm lại cái menu mà nội dung nhãn chỉ của blog chính thôi.Góp ý thế

Reply
19:23:00, 29 thg 9, 2016

giảm cân nhanh

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
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

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn