如果你需要用到多個(gè)輪播圖,jquery.cycle.all是非常適合的插件。它提供了多種輪播效果,同時(shí)可以通過自定義選項(xiàng)滿足各種需求。
下面是一個(gè)簡單示例,展示如何實(shí)現(xiàn)多個(gè)輪播圖。
<div class="slider"> <div><img src="slide1.jpg"></div> <div><img src="slide2.jpg"></div> <div><img src="slide3.jpg"></div> </div> <div class="slider"> <div><img src="slide4.jpg"></div> <div><img src="slide5.jpg"></div> <div><img src="slide6.jpg"></div> </div> <script> $(document).ready(function(){ $(".slider").each(function(){ $(this).cycle({ fx: 'fade', speed: 1000, timeout: 3000 }); }); }); </script>
上面的代碼中,我們定義了兩個(gè)輪播圖,分別是class為“slider”的兩個(gè)div。在document準(zhǔn)備好后,通過each()方法對每個(gè)輪播圖應(yīng)用cycle插件,并設(shè)置了三個(gè)自定義選項(xiàng):fx(輪播效果)、speed(速度)、timeout(自動(dòng)播放時(shí)間間隔)。
如果需要自定義更多選項(xiàng),可以在cycle()方法中添加更多參數(shù),詳情請參考jquery.cycle.all的官方文檔。