案例：jQuery实现轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

原创

最新推荐文章于 2024-08-27 19:30:26 发布 · 581 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #jquery

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

目的： 使用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

最低0.47元/天解锁文章