jQuery插件-Slider轮播图

JQuery插件-Slider轮播图插件下载Slider的使用插件下载Jquery插件提供了许多方便好用的插件，便于开发者使用！基于jQuery实现的轮播图插件下载地址：https://www.jq22.com/jquery-info23463本篇博客主要是描述一下最简单的jQuery轮播图的使用，jQuery插件库中还提供了很多其他的轮播图实现！可以去jquery插件库-轮播图进行查看。下载完成

Phoenix_YIBO

6682人浏览 · 2021-02-20 11:47:54

Phoenix_YIBO · 2021-02-20 11:47:54 发布

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

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