jQuery插件-Slider轮播图

插件下载

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

1 3、在js中使用

该轮播图的默认配置如下：

需要注意设置width和height时不要带单位，其单位默认为px。

简单代码实现示例

	<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>

注：评论区有同学提出轮转完一次后，出现图片右半部分空白的问题，翻了一下源码，解答如下，欢迎讨论：
用两张图片做测试，可看到生成的图片列表如下：

可以看到两张图片生成了三个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);
    }