Owl Carousel輪播插件介紹與使用?

Owl Carousel：Basic Demo | Owl Carousel | 2.3.4 (owlcarousel2.github.io)

「Owl Carousel」插件常用的參數(shù)配置如下：

示例代碼如下：

<!-- 引入 jQuery 和 Owl Carousel 的 CSS 文件 -->
<link rel="stylesheet" >
<link rel="stylesheet" >

<!-- HTML 部分 -->
<div class="owl-carousel">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<!-- 引入 jQuery 和 Owl Carousel 的 JS 文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- JS 調(diào)用部分 -->
<script>
  $(document).ready(function(){
    $(".owl-carousel").owlCarousel({
      items: 4,
      loop: true,
      autoplay: true,
      autoplayTimeout: 3000,
      autoplayHoverPause: true,
      smartSpeed: 500,
      nav: true,
      dots: false,
      margin: 20,
      responsive: {
        0: {
          items: 1
        },
        768: {
          items: 2
        },
        992: {
          items: 3
        },
        1200: {
          items: 4
        }
      },
      mouseDrag: true, 
      touchDrag: true,
      pullDrag: true,
      freeDrag: false, 
      autoplaySpeed: 1500
    });
  });
</script>

Owl Carousel將dotc小點(diǎn)導(dǎo)航切換成對(duì)應(yīng)圖片導(dǎo)航

?大致效果：

?代碼實(shí)現(xiàn)：

// HTML & CSS
<style>
// 選中時(shí)的樣式
.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, // 顯示左右導(dǎo)航箭頭
				dots: true, // 顯示小圓點(diǎn)導(dǎo)航
				navText: [
					'<img src="prev.png">', // 設(shè)置前導(dǎo)航按鈕圖片
					'<img src="next.png">' // 設(shè)置后導(dǎo)航按鈕圖片
				],
				dotsEach: true,
				dotsContainer: "#customDots", // 使用外部容器來(lái)存放導(dǎo)航點(diǎn)
				responsive: {
					0: {
						items: 1
					},
					600: {
						items: 1
					},
					1000: {
						items: 1
					}
				}
			});

			// 構(gòu)造自定義導(dǎo)航圖片
			var dotImages = [
				"./images/banner_1.jpg",
				"./images/banner_2.jpg",
				"./images/banner_3.jpg"
			];
			// 替換小圓點(diǎn)導(dǎo)航為自定義圖片
			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 UI Datepicker日期選擇插件

確保在頁(yè)面中引入 jQuery 和 jQuery UI 的庫(kù)文件

<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

然后，在你的 JavaScript 代碼中初始化 Datepicker 插件

$(function() {
  $("#datepicker").datepicker(); // 將其綁定到具有 id="datepicker" 的 input 元素
});

最后，在 HTML 中添加一個(gè)輸入框來(lái)使用 Datepicker 插件?

?

<p>Date: <input type="text" id="datepicker"></p>

效果圖：

補(bǔ)充：

要將 jQuery UI Datepicker 的日期格式更改為年月日形式，可以使用 dateFormat 選項(xiàng)來(lái)實(shí)現(xiàn)?

$(function() {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd"  // 將日期格式修改為年-月-日
  });
});

datetimepicker?另一個(gè)非常流行和強(qiáng)大的日期時(shí)間選擇插件

首先，確保在頁(yè)面中引入 jQuery 和 datetimepicker 的庫(kù)文件

<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" >

然后，在你的 JavaScript 代碼中初始化 datetimepicker 插件

$(function() {
  $("#datetimepicker").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: 'HH:mm:ss' // 設(shè)置日期和時(shí)間格式
  });
});

最后，在 HTML 中添加一個(gè)輸入框來(lái)使用 datetimepicker 插件

<p>Date and Time: <input type="text" id="datetimepicker"></p>

效果圖：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-737248.html

到了這里，關(guān)于【Jquery插件】Owl Carousel輪播插件介紹與使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！