jQuery插件-Slider轮播图

JQuery插件-Slider轮播图

插件下载
Slider的使用
- 1、引入文件
- 2、创建一个div
- 3、在js中使用
简单代码实现示例

插件下载

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 rightauto: 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);}