這是一個多張圖片轉換的效果
之前想做類似的效果 但找不到想要的jQuery plugin
在Google裏找很久終於讓我找到他 - jCarousel Lite
原網站有展示他不同效果功能的DEMO
詳見:
http://www.gmarwaha.com/jquery/jcarousellite/#demo
jCarousel Lite js download:
http://www.gmarwaha.com/jquery/jcarousellite/#download
另外這裏有最新的版本 但我在使用時排版會跑掉
所以我沒有使用他 可提供大家參考
https://github.com/kswedberg/jquery-carousel-lite
這個範例主要是修改他本來的功能 去取得我想要的效果
jCarousel Lite 有預設auto的參數去自動變換圖片
但我希望是當滑鼠移動到圖片時才執行圖片跑馬燈的效果
他會一直循環轉換圖片直至滑鼠移開停止
以下是我的範例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery plugin - jCarousel Lite 範例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.jcarousellite.js"></script>
<script type="text/javascript">
var timer;
$(document).ready(function(){
//執行jCarouselLite
$(".jCarouselLite").jCarouselLite({
btnNext : ".carousel .next",
btnPrev : ".carousel .prev",
visible :
3,
speed :
1000
});
//滑鼠移入移出啟動和暫停效果
$("#pic").live( 'mouseenter', function() {
timer = setInterval(nextpic,
800);
});
$("#pic").live( 'mouseleave', function() {
clearInterval(timer);
});
});
function nextpic()
{
$(".carousel .next").click();
}
</script>
</head>
<body>
<div class="carousel auto"><span class="prev"></span><span class="next"></span>
<div class="jCarouselLite"><ul>
<li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="
images/pic-1.jpg" /></li>
<li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="
images/pic-2.jpg" /></li>
<li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="
images/pic-3.jpg" /></li>
<li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="
images/pic-4.jpg" /></li>
<li><img id="pic" style="width:104px;height:80px;margin-right:5px;" src="
images/pic-5.jpg" /></li>
</ul></div>
</div>
</body>
</html>
備註
jCarousel Lite的參數
btnPrev : 上一頁的按鈕
btnNext : 下一頁的按鈕
btnGo : 針對滑動到那一個圖片的按鈕
mouseWheel : 能不能用滑鼠的滑輪去更換圖片
auto : 自動換轉的速度 不能自動換轉則為0 預設為0
speed : 換轉的速度 停止jCarousel Lite
則為0
easing : 轉換的效果
vertical : 是不是直的 預設為橫的
circular : 是不是循環的 預設為true
visible : 可見多少張圖 (可設1,1.5,2...)
start : 設定第一張圖是哪一張 預設為0 (可設1,2,3...)
scroll : 設定轉換一次移動多少張圖 預設為1
beforeStart : 開始前執行的function
afterEnd : 結束後執行的function
文筆于是太好 詳細還是看原網站的demo比較清楚
