大致效果：

?代碼實現：

// HTML & CSS <style> // 選中時的樣式 .owl-dot.active {box-shadow: 2px 2px 2px 2px red;margin: 10px; } </style> <div class="owl-carousel owl-theme"><div><img src="./images/banner_1.jpg"></div><div><img src="./images/banner_2.jpg"></div><div><img src="./images/banner_3.jpg"></div> </div> <div id="customDots"></div> // JS$(document).ready(function () {var owl = $(".owl-carousel");owl.owlCarousel({loop: true,margin: 10,nav: true, // 顯示左右導航箭頭dots: true, // 顯示小圓點導航navText: ['<img src="prev.png">', // 設置前導航按鈕圖片'<img src="next.png">' // 設置后導航按鈕圖片],dotsEach: true,dotsContainer: "#customDots", // 使用外部容器來存放導航點responsive: {0: {items: 1},600: {items: 1},1000: {items: 1}}});// 構造自定義導航圖片var dotImages = ["./images/banner_1.jpg","./images/banner_2.jpg","./images/banner_3.jpg"];// 替換小圓點導航為自定義圖片for (var i = 0; i < dotImages.length; i++) {$("#customDots button:nth-child(" + (i + 1) + ")").css({"id": "dot" + i,"height": "100px","width": "100px","background-image": "url(" + dotImages[i] + ")","background-size": "cover"});}});

總結

以上是生活随笔為你收集整理的【Jquery插件】Owl Carousel将dotc小点导航切换成对应图片导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。