文章目录

如何使用jQuery实现自动轮播效果-jQuery网页轮播图

用户：恋影编辑时间：2025-02-07 阅读：389 评论：0

1、前言

在现代网页设计中，自动轮播效果是一种非常常见且实用的交互方式，它可以在有限的空间内展示多张图片、信息或广告等内容，为用户带来更好的视觉体验。本文将详细介绍如何使用 jQuery 来实现一个简单的自动轮播效果。

2、准备工作

在开始之前，你需要确保已经了解基本的 HTML、CSS 和 JavaScript 知识，并且掌握 jQuery 的基本使用方法。此外，你还需要引入 jQuery 库，可以通过以下两种方式引入：

》》本地引入

将 jQuery 库文件下载到本地项目目录中，然后在 HTML 文件中使用 <script> 标签引入

》》CDN 引入

使用公共的 CDN（内容分发网络）来引入 jQuery 库，这样可以加快加载速度：

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() 方法实现鼠标悬停时暂停自动轮播，鼠标移开后继续轮播的功能。