JQuery纯手搓轮播图【支持自动轮播、划动轮播、圆点联动】

HTML:

<!-- 轮播图 -->
			<div class="lunbo">
				<!-- 轮播区域 -->
				<div class="lunbo_content">
					<div class="imgContent">
						<img draggable='false' class="imgItem activeImg Started" src="img/lunbo01.jpg">
						<!-- <img draggable='false' class="imgItem" src="img/logo.png"> -->
						<img draggable='false' class="imgItem Ending" src="img/lunbo02.jpg">
					</div>
				</div>
				<!-- 导航圆点 -->
				<div class="yuan">
					<span class="yuanItem yuanItemActive"></span>
					<!-- span class="yuanItem"></span> -->
					<span class="yuanItem"></span>
				</div>
			</div>

JS:

// next() 方法返回被选元素的后一个同级元素。
	// prev() 方法返回被选元素的前一个同级元素。
	// slideDown() 方法以滑动方式显示被选元素。
	// parent() 方法返回被选元素的直接父元素。
	// siblings() 方法返回被选元素的所有同级元素。
	// find() 方法返回被选元素的后代元素。
	// slideUp() 方法以滑动方式隐藏被选元素。
	// substring(开始，结束)截取字符串
	$(function() {
		let index = 0
		let time = ''
		// 鼠标滑动起始位置
		let start = 0
		// 鼠标滑动结束位置
		let end = 0
		automatic()
		$("#ul>li>span").mouseenter(function() {
			$(this).next().slideDown(500);
			$(this).parent().siblings().find("ul").slideUp(500)
		})
		$("#ul").mouseleave(function() {
			$(".li").find("ul").slideUp(500)
		})
		// 上一张事件
		$(".Previous").click(function() {
			Previous()
		})
		// 下一张事件
		$(".Next").click(function() {
			Next()
		})
		// 鼠标悬浮事件
		$(".imgContent").mouseover(function() {
			suspend()
		})
		//鼠标离开事件
		$(".imgContent").mouseout(function() {
			automatic()
		})
		// 上一张逻辑
		function Previous() {
			// 将原先展示（拥有activeImg类名的图片）先保存
			let old = $(".activeImg")
			// 隐藏先前显示的照片
			old.removeClass("activeImg")
			// 判断是否是第一张图片
			// Started为第一张图片的独有类名，用来判断是否为第一张图片，判断上一张边界逻辑
			if (old.is(".Started")) {
				// 是则将最后一张图片显示
				$(".Ending").addClass("activeImg")
			}
			// 否则显示上一张图片
			old.prev().addClass("activeImg")
			// 根据当前显示照片的下标决定显示的圆点
			index = $(".activeImg").index()
			// 调用圆点逻辑方法
			yuanActive()
		}
		// 下一张逻辑
		function Next() {
			let old = $(".activeImg")
			old.removeClass("activeImg")
			// 判断是否是最后一张图片
			// Started为最后一张图片的独有类名，用来判断是否为最后一张图片，判断下一张边界逻辑
			if (old.is(".Ending")) {
				$(".Started").addClass("activeImg")
			}
			old.next().addClass("activeImg")
			$(".activeImg").index(this)
			index = $(".activeImg").index()
			yuanActive()
		}
		// 圆点显示逻辑
		function yuanActive() {
			let arr = $(`.yuanItem:nth-child(${index+1})`)
			$(".yuanItemActive").removeClass("yuanItemActive")
			arr.addClass("yuanItemActive")
		}
		// 计时器
		function automatic() {
			time = setInterval(() => {
				Next()
			}, 3000)
		}
		//悬浮暂停
		function suspend() {
			clearInterval(time)
		}
		//鼠标点击事件
		$(".imgItem").mousedown(function(e) {
			// console.log('x:' + e.pageX + 'y:' + e.pageY)
			start = e.pageX
		})
		// 左键松开事件
		$(".imgItem").mouseup(function(e) {
			// console.log('x:' + e.pageX + 'y:' + e.pageY)
			end = e.pageX
			if (start - end > 100) {
				// console.log("左划")
				Next()
			} else if (end - start > 100) {
				// console.log("右划")
				Previous()
			}
		})

CSS:

/* 轮播 */
.lunbo {
	width: 100%;
	height: auto;
	min-width: 1200px;
}

.lunbo_content {
	width: 100%;
	height: auto;
	z-index: 1;
}

.imgItem {
	width: 100%;
	height: 460px;
	display: none;
}

.activeImg {
	display: block;
}

.yuan {
	width: 100px;
	height: 50px;
	line-height: 50px;
	/* background-color:#463527 ; */
	margin: 0 auto;
	text-align: center;
	z-index: 20;
	margin-top: -50px;
}

.yuanItem {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #5f5f5f;
	border-radius: 50%;
}

.yuanItemActive {
	background-color: blue;
}

.Previous {
	width: 40px;
	height: 390px;
	line-height: 390px;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	color: #fff;
	font-size: 34px;
	text-align: center;
}

.Next {
	width: 40px;
	height: 390px;
	line-height: 390px;
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	right: 0;
	color: #fff;
	font-size: 34px;
	text-align: center;
}