- 定义了
.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);"><</a> <a href="javascript:void(0);">></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) }
效果如下：
