之前想做類似的效果 但找不到想要的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比較清楚
沒有留言:
張貼留言