案例：jQuery实现轮播图

最新推荐文章于 2025-05-15 09:21:09 发布

小召小召

最新推荐文章于 2025-05-15 09:21:09 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

文章标签： js javascript jquery

本文链接：https://blog.csdn.net/originalApril/article/details/115408181

本文通过案例展示了如何使用jQuery创建一个轮播图功能。包括鼠标点击左右箭头切换图片，三秒自动轮播，鼠标悬停停止切换，离开后恢复自动切换，以及小圆点指示器同步显示当前图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的： 使用jQuery实现一个轮播图。鼠标单机左右箭头实现切换上/下一章。三秒自动轮播一张图片，鼠标悬停停止自动切换，鼠标离开继续实现三秒自动切换，并且图片下面的小圆点跟随图片切换。

代码示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        img{
    
    
            width: 600px;
            height: 400px;
            float: left;
        }
        .container{
    
    
            width: 600px;
            height: 400px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .imgs{
    
    
            width: 4200px; /* 7张图片的宽 7*600=4200 */
            height: 400px;
            position: absolute;
            left: 0px;/* 轮播图控制的就是绝对定位的left */
            overflow: hidden;
        }
        .point{
    
    
            width: 100px;
            height: 10px;
            position: absolute;
            left: 250px;
            bottom: 20px;
        }
        .point span{
    
    
            display: block;
            width: 10px;
            height: 10px;
            background: #333;
            border-radius: 50%;
            border:1px solid #FFF;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }
        .point span.on{
    
    
            background-color: orange;
        }
        .arrow{
    
    
            width: 40px;
            height: 40px;
            font-size: 36px;
            line-height: 35px;
            cursor: pointer;
            pos