jQuery实现轮播图（无缝轮播，附效果图），代码有详解。

最新推荐文章于 2025-07-04 14:37:40 发布

Ecomools

最新推荐文章于 2025-07-04 14:37:40 发布

阅读量3w

点赞数 37

CC 4.0 BY-SA版权

文章标签： jQuery 轮播图无缝轮播基于jQuery 详解

本文链接：https://blog.youkuaiyun.com/qq_36996271/article/details/82015950

jQuery实现轮播图

这里用了一些有颜色的div块当做图片，复制之后可以直接用，有需要的话再根据自己的需求替换就可以了。

功能：
（1）左右无缝轮播。
（2）鼠标移上去会停止，移走继续动。
（3）点击圆点切换到对应的图片。
（4）点击箭头向对应的方向移动。

效果图：
这里写图片描述

jQuery代码（要引入jQuery文件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .banner {
        width: 600px;
        height: 400px;
        border: 5px solid black;
        margin: 100px auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }
    .banner .slide {
        width: 4000px;
        height: 400px;
        position: absolute;
        left: -600px;
    }
    .banner .slide .pic {
        width: 600px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        float: left;
        font-size: 72px;
        color: white;
    }
    .banner .slide .a {
        background-color: black;
    }