jQuery是一種非常流行的JavaScript庫,其中包含了各種實用的方法和函數。其中一個非常實用的插件就是jquery.slide.js,它可以幫助我們輕松地實現網頁中的輪播圖效果。
// 引入jQuery和jquery.slide.js <script src="jquery.min.js"></script> <script src="jquery.slide.js"></script> // 在HTML中添加輪播圖結構 <div class="slider"> <ul class="slider-lst"> <li ><img src="image/1.jpg"></li> <li ><img src="image/2.jpg"></li> <li ><img src="image/3.jpg"></li> </ul> <ul class="slider-nav"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <div class="slider-ctrl"> <a href="#" class="prev"><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>接下來,我們使用jquery.slide.js對網頁中的輪播圖進行設置和控制:
$(function() { // 輪播圖控制 $(".slider").slide({ autoPlay: true, // 自動播放 delayTime: 5000, // 停頓時間 mainCell: ".slider-lst", // 輪播圖片的容器 titCell: ".slider-nav li", // 導航點的容器 effect: "fold", // 動畫效果 trigger: "click", // 導航點觸發方式 prevCell: ".prev", // 上一張按鈕 nextCell: ".next", // 下一張按鈕 scroll: 1 // 每次輪播張數 }); });通過以上代碼,我們就可以輕松地實現一個美觀、實用的輪播圖效果了!