jQuery.cycle2.js 是一個 jQuery 插件，用于制作輪播圖或幻燈片等組件效果。它使用了 CSS3 過渡和動畫效果，同時還提供了多種輪播圖的切換方式。

使用 jQuery.cycle2.js 需要先引入 jQuery 庫和對應(yīng)的 jQuery.cycle2.js 文件。

<!-- 引入 jQuery 庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 jQuery.cycle2.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

基本用法

下面的代碼展示了如何使用 jQuery.cycle2.js 制作一個簡單的輪播圖。

<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="3000"
data-cycle-pager="#pager"
data-cycle-pager-template"<li><a href='#'>{{slideNum}}</a></li>">
<img src="slide1.jpg"><img src="slide2.jpg"><img src="slide3.jpg"></div><div id="pager"></div>

如上代碼中，.cycle-slideshow 是包含輪播圖的容器，data-cycle-fx 指定了輪播圖的切換方式，這里是水平滾動。data-cycle-timeout 指定了每張圖片的切換間隔，這里是 3000 毫秒，也就是 3 秒。data-cycle-pager 和 data-cycle-pager-template 控制了輪播圖下方的分頁器，即顯示當(dāng)前圖片序號和可點擊切換的按鈕。

其他用法

jQuery.cycle2.js 還支持更多自定義選項和方法，比如:

• data-cycle-prev 和 data-cycle-next 控制上一張和下一張按鈕；
• data-cycle-pause-on-hover 控制鼠標(biāo)懸停時輪播圖是否暫停；
• data-cycle-log 控制調(diào)試信息是否輸出到瀏覽器控制臺。

更詳細的用法和選項，請參考官方文檔。jQuery.cycle2.js 還提供了多個插件和擴展，如圖片懶加載、圖片縮放等。