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>效果图：文章来源：https://www.toymoban.com/news/detail-737248.html
文章来源地址https://www.toymoban.com/news/detail-737248.html
到了这里，关于【Jquery插件】Owl Carousel轮播插件介绍与使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
