![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f6adfe2386ae7baaf26cc07a51be0f33.png)
插件下载
Jquery插件提供了许多方便好用的插件,便于开发者使用!
基于jQuery实现的轮播图插件下载地址:https://www.jq22.com/jquery-info23463
本篇博客主要是描述一下最简单的jQuery轮播图的使用,jQuery插件库中还提供了很多其他的轮播图实现!可以去jquery插件库-轮播图进行查看。
下载完成后,解压缩包!
Slider的使用
解压后的文件打开后有一个Slider目录,进入该目录可以看到如下图所示的几个文件,我们开发所需的文件便是图中用红色圈起来的文件。
1、引入文件
将index.css、jquery.min.js、jquery.slider.js这三个文件复制到项目中,创建一个html文件,引入文件。
注:index.css最好改一个比较有标识性的名字,另外jQuery的js文件一定要放在jquery.slider.js的前面,因为该插件是基于jquery来实现的。
2、创建一个div
块的id必须为slider
<div id="slider"></div>
3、在js中使用
<script type="text/javascript">
var options = {
container: "slider", // 轮播容器
imgs: ['./img/timg (14).jfif','./img/timg (15).jfif','./img/timg (16).jfif','./img/timg (17).jfif','./img/timg.jfif'],
duration: 3000, // 轮播时长 可以是 normal slow fast 或者是数字(单位为毫秒)
delay: 3000, // 延迟
direction: "left", // 自动轮播方向 可以是left right
auto: true, // 是否自动轮播
arrows: true, // 是否显示左右箭头
width: 800, // 宽
height: 500 // 高
}
$('#slider').sliderImg(options);
// $('#slider').sliderImg({
// imgs: ['./img/timg (14).jfif','./img/timg (15).jfif','./img/timg (16).jfif','./img/timg (17).jfif','./img/timg.jfif']
// })
</script>
该轮播图的默认配置如下:
需要注意设置width和height时不要带单位,其单位默认为px。
简单代码实现示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/jquery.slider.css" />
<script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/jquery.slider.js"></script>
</head>
<body>
<div id="slider"></div>
<script type="text/javascript">
var options = {
container: "slider", // 轮播容器
imgs: ['./img/timg (14).jfif','./img/timg (15).jfif','./img/timg (16).jfif','./img/timg (17).jfif','./img/timg.jfif'],
duration: 3000, // 轮播时长 可以是 normal slow fast 或者是数字(单位为毫秒)
delay: 3000, // 延迟
direction: "left", // 自动轮播方向
auto: true, // 是否自动轮播
arrows: true, // 是否显示左右箭头
width: 800, // 宽
height: 500 // 高
}
$('#slider').sliderImg(options);
// $('#slider').sliderImg({
// imgs: ['./img/timg (14).jfif','./img/timg (15).jfif','./img/timg (16).jfif','./img/timg (17).jfif','./img/timg.jfif']
// })
</script>
</body>
</html>
注:评论区有同学提出轮转完一次后,出现图片右半部分空白的问题,翻了一下源码,解答如下,欢迎讨论:
用两张图片做测试,可看到生成的图片列表如下:
可以看到两张图片生成了三个li,最后一个li没有设置宽度,导致出现下图的情况:
可以在源码的jquery.slider.js文件中进行修改,在创建dom的时候给最后一个li加上宽度
Slider.prototype.createDom = function () { // 创建基本的DOM结构
var _this = this;
var imgs = this.options.imgs;
var imgX = $("<ul class='" + this.id + "-ul'></ul>");
var imgLi = "";
var circleX = $("<div class='" + this.id + "-circlex'><ul class='" + this.id + "-circlex-ul'></ul></div>");
var circleLi = "";
for (var i = 0; i < imgs.length; i++) {
var active = i === 0 ? "active" : "";
imgLi += "<li style='width: " + _this.liWidth + "px;' class='" + this.id + "-ul-li'><a class='" + this.id + "-ul-li-a' href='javascript: void(0);'>" +
"<img class='" + this.id + "-ul-li-a-img' src='" + imgs[i] + "'>" +
"</a></li>";
if (i === imgs.length - 1) {
imgLi += "<li style='width: " + _this.liWidth + "px;' class='" + this.id + "-ul-li'><a class='" + this.id + "-ul-li-a' href='javascript: void(0);'>" +
"<img class='" + this.id + "-ul-li-a-img' src='" + imgs[0] + "'>" +
"</a></li>";
}
circleLi += "<li class='" + this.id + "-circlex-ul-li " + active + "'></li>";
}
var prev = "<a class='" + this.id + "-btn-prev'><span class='" + this.id + "-btn-prev-span'></span></a>";
var next = "<a class='" + this.id + "-btn-next'><span class='" + this.id + "-btn-next-span'></span></a>";
var btnX = $("<div class='" + this.id + "-btn hide'>" + prev + next + "</div>");
imgX.append(imgLi);
circleX.children().append(circleLi);
$("#" + this.id).css({
width: _this.options.width,
height: _this.options.height
});
$("#" + this.id).append(imgX).append(circleX).append(btnX);
}