哇寶部落格
Wabow Information Inc. Blog
- 官網：http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
- 展示：http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
現在很多網站，首頁常喜歡加上跑馬燈，在小小的空間內，卻可以顯示無數的圖片或是文字，不論是他家廠牌廣告、自家商品展示也由於動感的表現，比起死板板的文字，更能引起使用者的目光，目前訪間有很多種的跑馬燈plugin挑了一款還不錯方便，可設定自動開始瀏覽，或是加上按鈕，由使用者手動click變換 (下載回來後，在setting上加過自設action，讓按鈕變成mouseover動作，感覺上有些怪怪的，例：圖一次跑兩張＠＠，所以還是用原設定click吧)
使用方式：
載入 jQuery 及 stepCarousel
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/stepcarousel.js" type="text/javascript"></script>
html 格式
<div class="stepcarousel"> <div class="belt"> <div class="panel"><img src="1.jpg" alt="" /></div> <div class="panel"><img src="2.jpg" alt="" /></div> <div class="panel"><img src="3.jpg" alt="" /></div> <div class="panel"><img src="4.jpg" alt="" /></div> <div class="panel"><img src="5.jpg" alt="" /></div> </div> </div>
最後加入
$(function(){
stepcarousel.setup({
galleryid: 'mygallery',
beltclass: 'belt', s
panelclass: 'panel',
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: false, action: 'click', moveby: 1, leftnav: ['leftnav.gif', -5, 80], rightnav: ['rightnav.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'],
contenttype: ['inline']
})
})呈現效果：(下面圖會自動一直輪撥)
- Tags: jQuery