【Jquery插件集合】轮播、时间处理插件

Owl Carousel轮播插件介绍与使用 

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

「Owl Carousel」插件常用的参数配置如下：

参数名称	参数类型	默认值	说明
items	number	3	设置同时显示的轮播项数
loop	boolean	false	是否开启循环播放
autoplay	boolean	false	是否自动播放
autoplayTimeout	number	5000	自动播放等待时间，单位为毫秒
autoplayHoverPause	boolean	false	当鼠标移到轮播图上时，是否暂停自动播放
smartSpeed	number	250	移动速度
nav	boolean	false	是否显示左右箭头
dots	boolean	true	是否显示小圆点导航
margin	number	0	轮播项之间的间距，单位为像素（pixel）
responsive	object	——	响应式布局设置对象
mouseDrag	boolean	true	是否允许使用鼠标拖拽切换轮播项
touchDrag	boolean	true	是否允许使用触摸屏手势切换轮播项
pullDrag	boolean	true	是否允许拖拽轮播项时拉动轮播图
freeDrag	boolean	false	是否允许拖拽轮播项时自由切换方向
autoplaySpeed	number	2500	自动播放的速度，单位为毫秒

示例代码如下：

<!-- 引入 jQuery 和 Owl Carousel 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<!-- 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 调用部分 -->
<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小点导航切换成对应图片导航

 大致效果：

 代码实现：

// 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 UI Datepicker日期选择插件

确保在页面中引入 jQuery 和 jQuery UI 的库文件

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 中添加一个输入框来使用 Datepicker 插件 

 

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

效果图：

补充：

要将 jQuery UI Datepicker 的日期格式更改为年月日形式，可以使用 dateFormat 选项来实现 

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

datetimepicker 另一个非常流行和强大的日期时间选择插件

首先，确保在页面中引入 jQuery 和 datetimepicker 的库文件

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.css">

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

$(function() {
  $("#datetimepicker").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: 'HH:mm:ss' // 设置日期和时间格式
  });
});

最后，在 HTML 中添加一个输入框来使用 datetimepicker 插件

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

效果图：