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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEcO8w5LRngD0jN0RgQ-fqtNTpT-CCf07su5U3K3c2iTSi4lqUbw-yfmzxbgr-NCaUOvgEOJ_XrAKgKmXjqUVpxKyZa1mbD8Zwnh2BLFm9u7mObO_jqYRYygq9_CbqCqj2kV-tbEmsDo/s0/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzA2TfNypzS8FAdhcIlmr7tzXtns7mrl3ysyWsXRVXlsZBGuwFyJNt2rnGZmYNJ23oamtv_MGtCfK4eKsycG877kcF8LicQxpkpk1FIB1QR8RlEUGOOGirG_MjzXPCCEh-L0Q-Wdw4xtg/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztYj0tfTgZKFsaumpZ37-4a0ZpvwZApQv0flhNQjJa4Fp6wzoE6Qe8ACSQT5fg8oaHaDuYNa-eDiq3syRLFXpyc0-PQUC97eRdfDPlbpAziQqwzkt5AKjW-6bhx7-LLLL3dHcaMANqeA/s0/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 });