jQuery原生轮播图写法

• 定义了 .wrapper 类，用于设置整个轮播图容器的样式，包括宽度、高度和边框等。
• 图片使用绝对定位，通过设置 position: absolute 和 left: 0; top: 0; 确保图片叠加在一起，并且只显示第一张图片。
• 小圆点使用绝对定位，通过设置 position: absolute、left: 175px; 和 bottom: 10px; 确保小圆点居中显示在底部位置。
• 左右箭头使用绝对定位，通过设置 position: absolute 和 top: 35%; 确保箭头垂直居中显示。
• .active 类用于设置当前活动图片对应的小圆点的背景颜色。

            .wrapper {
				width: 500px;
				height: 450px;
				border: 1px solid red;
				position: relative;
			}
		
			/* 5张图片叠加到一块 */
			.wrapper img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
		
			.wrapper img:nth-of-type(1) {
				display: block;
			}
		
			/* 小圆点 */
			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 175px;
				bottom: 10px;
				z-index: 100
			}
		
			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}
		
			/* 左右箭头 */
			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}
		
			.wrapper a:nth-of-type(1) {
				left: 10px;
		
			}
		
			.wrapper a:nth-of-type(2) {
				right: 10px;
			}
		
			.active {
				background-color: red;
			}

• 在容器内，使用 <img> 标签添加了五张图片，并给每张图片添加了不同地址的 src 属性。
• 使用 <span> 标签创建了五个小圆点作为图片导航指示器。
• 使用 <a> 标签创建了两个箭头，用于切换上一张和下一张图片。

       <div class="wrapper">
			<div class="contain">
				<img src="./img/063E06CD3FE5E7B2ABCF302ADE948464.jpg" alt="">
				<img src="./img/0F16C4EA63793241C0036F5F8343C24C.jpg" alt="">
				<img src="./img/13100EF368FB52266EA2158787F04145.jpg" alt="">
				<img src="./img/2FF8451CCDD6529E0B0FCB1090F2E03F.jpg" alt="">
				<img src="./img/2172B6BEA7D1DD84749967566E307170.jpg" alt="">
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>

• 定义了一个变量 index 用于记录当前显示的图片索引，默认为0。
• 给左箭头 <a> 添加点击事件处理函数，调用 prev_pic() 函数切换到上一张图片。
• 给右箭头 <a> 添加点击事件处理函数，调用 next_pic() 函数切换到下一张图片。
• 给容器 .wrapper 添加鼠标悬停和离开事件处理函数，实现鼠标悬停时停止轮播，离开时重新自动轮播。
• 定义了 next_pic() 函数用于切换到下一张图片，通过增加 index 变量的值来控制当前显示的图片索引，并调用 addStyle() 函数更新样式。
• 定义了 prev_pic() 函数用于切换到上一张图片，通过减少 index 变量的值来控制当前显示的图片索引，并调用 addStyle() 函数更新样式。
• 定义了 addStyle() 函数用于控制图片的显示和隐藏以及小圆点的样式，使用 jQuery 的 fadeIn() 和 fadeOut() 方法来实现淡入淡出效果，并通过添加或移除 .active 类来设置当前活动小圆点的背景颜色。
• 定义了 autoplay() 函数用于自动轮播，通过设置定时器每隔一段时间调用 next_pic() 函数实现自动切换。
• 在页面加载完成后，调用 autoplay() 函数开始自动轮播。

           var index=0;
			// 点击上一张
			$("a:first").click(function(){
				prev_pic();
			})
			// 点击下一张
			$("a:last").click(function(){
				next_pic();
			})
			// 悬浮停止
			$(".wrapper").mouseover(function(){
				clearInterval(id);
			});
			$(".wrapper").mouseout(function(){
					autoplay();
			})
			
			
			// 下一张
			function next_pic(){
				index++;
				if(index>4){
					index=0;
				}
				addStyle();
			}
			
			// 上一张
			function prev_pic(){
				index--;
				if(index<0){
					index=4;
				}
				addStyle();
			}
			
			// 控制图片显示隐藏,小圆点背景色
			function addStyle(){
				$("img").eq(index).fadeIn();
				$("img").eq(index).siblings().fadeOut();
				$("span").eq(index).addClass("active");
				$("span").eq(index).siblings().removeClass("active");
			}
			
			// 自动轮播
			var id;
			autoplay();
			function autoplay(){
				id=setInterval(function(){
					next_pic();
				},1000)
			}

 效果如下：