1、前言
在现代网页设计中，自动轮播效果是一种非常常见且实用的交互方式，它可以在有限的空间内展示多张图片、信息或广告等内容，为用户带来更好的视觉体验。本文将详细介绍如何使用 jQuery 来实现一个简单的自动轮播效果。
2、准备工作
在开始之前，你需要确保已经了解基本的 HTML、CSS 和 JavaScript 知识，并且掌握 jQuery 的基本使用方法。此外，你还需要引入 jQuery 库，可以通过以下两种方式引入：
》》本地引入
将 jQuery 库文件下载到本地项目目录中，然后在 HTML 文件中使用 <script> 标签引入
<script src="path/to/jquery.min.js"></script>
》》CDN 引入
使用公共的 CDN（内容分发网络）来引入 jQuery 库，这样可以加快加载速度：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
3、HTML 元素结构搭建
<div class="demo"> <!-- 轮播容器 --> <ul class="slide"> <li><img src="images/4.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了1</h3> </li> <li><img src="images/5.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了2</h3> </li> <li><img src="images/6.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了3</h3> </li> <li><img src="images/7.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了4</h3> </li> <li><img src="images/8.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了5</h3> </li> <li><img src="images/9.jpg"> <h3>为什么 OpenAI 突然把 GPT-4o 免费了6</h3> </li> </ul> <!-- 轮播图小圆点导航 --> <ul class="menu"> </ul> </div>
在这个 HTML 结构中，.slider 类的 ul 元素是轮播的整体容器，而 .slide 类里面的 li 元素则代表每个轮播项，每个轮播项中包含一张图片和标题文字。你需要将 img替换为你自己的图片路径，h3替换为自己的文字标题。
4、CSS 样式设置
接下来，我们需要使用 CSS 来设置轮播图的样式，包括容器的宽度、高度、和位置摆放等。以下是对应的 CSS 代码：
* { margin: 0; padding: 0; box-sizing: border-box; }
ul { list-style: none; }
a {text-decoration: none;}
.demo {
position: relative;
width: 750px;
height: 460px;
margin: 100px auto 0;
}
.slide li::after {
/* 黑色遮罩层 */
position: absolute;
bottom: 4px;
left: 0;
content: '';
width: 750px;
height: 100px;
background-color: rgba(0, 0, 0, .35);
}
.slide li {
position: absolute;
top: 0;
left: 0;
}
.slide li h3 {
position: absolute;
bottom: 50px;
left: 20px;
color: #fff;
z-index: 999;
font-weight: 400;
font-size: 16px;
}
.slide li img {
width: 750px;
height: 460px;
}
.menu {
position: absolute;
bottom: 20px;
right: 20px;
}
.menu li {
float: left;
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
margin-left: 5px;
}
.current {
box-shadow: 0 0 2px 2px rgba(255, 255, 255, 1);
}5、jQuery 代码实现
$(function () {
let index = 0;
let piclenth = $(".slide li").length;
let timer;
// 1、根据轮播项的数量创建 小圆点
$.each($(".slide li"), function (i, ele) {
$(".menu").append($("<li></li>"));
})
// 2、显示第一张图片，其它图片隐藏，小圆点默认第一个加载current类
$(".slide li").eq(0).show().siblings().hide();
$(".menu li").eq(0).addClass("current").siblings().removeClass();
// 3、当鼠标经过小圆点时，就显示对应的图片，清除计时器
$(".menu li").mouseover(function () {
index = $(this).index();
show();
clearInterval(timer);
})
// 4、当鼠标离开小圆点时，计时器生效
$(".menu li").mouseout(function () {
timer = setInterval(function () {
index++;
index = index % piclenth;
show();
}, 2000)
})
// 5、计时器
timer = setInterval(function () {
index++;
index = index % piclenth;
show();
}, 2000)
// 6、函数封装，显示当前轮播项，其它隐藏； 为小圆点添加当前类current，其它移除类
function show() {
$(".slide li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".menu li").eq(index).addClass('current').siblings().removeClass();
}
})在这段 jQuery 代码中：首先，我们使用 $(function(){}) 函数确保页面加载完成后再执行代码。然后，通过选择器获取轮播容器和所有轮播项，并初始化相关变量，如轮播项的数量、当前索引等。show()函数用于实现轮播项的切换；使用 addClass() 方法可以把轮播项小圆点设置为current活动状态。使用 setInterval() 函数设置定时器，按照指定的间隔时间调用 show() 函数，从而实现自动轮播。最后，使用 mouseover()和mouseout() 方法实现鼠标悬停时暂停自动轮播，鼠标移开后继续轮播的功能。
6、总结
通过以上步骤，我们成功地使用 jQuery 实现了一个简单的自动轮播效果。你可以根据自己的需求对代码进行扩展和优化，例如添加导航按钮、指示器等，以提升用户体验。希望本文能帮助你更好地理解和应用 jQuery 实现自动轮播效果。
如果你在实现过程中遇到任何问题，欢迎在评论区留言交流。以上就是使用 jQuery 实现自动轮播效果的详细介绍，希望对你有所帮助！
