【jQuery】手把手教你传统三位轮播图附源码（html/css/jQuery)）

最新推荐文章于 2024-01-09 10:05:56 发布

cakeAndAle

最新推荐文章于 2024-01-09 10:05:56 发布

阅读量1.1k

点赞数 1

分类专栏： ▶前端 # 【JavaScript】 # 【jQuery】文章标签： jQuery css html 轮播图前端

本文链接：https://blog.csdn.net/weixin_42835409/article/details/114656965

版权

▶前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

【JavaScript】

4 篇文章 0 订阅

订阅专栏

【jQuery】

3 篇文章 0 订阅

订阅专栏

前言

英文叫carousel，类似于淘宝、京东首页的轮播图，前端工程师常称为三位轮播/传统轮播。
在这里插入图片描述

正文

（1）引包（jQuery）

第一步：打开官网

官网： https://www.jq22.com/jquery-info122

第二步：复制源码

根据自己需要，点击如图所示链接，复制源码；
我这里选的是最新的3.4.1版本；
在这里插入图片描述

第三步：创建引入包的文件夹

新建js（自己起名）文件夹，新建txt文本，改名为×.min.js
在这里插入图片描述

第四步：保存源码

将源码保存到刚刚创建的压缩版的js文件里
在这里插入图片描述

link标签：引入外部样式，css文件；
script标签：引入js文件；

（2）创建项目文件

html部分 + css部分 + img部分 + 引入的JQuery部分
在这里插入图片描述

（3）代码

1：HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="../../css/default.css">
    <!-- 引JQ包 -->
    <script src="../../js/jQuery.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li class="current"><img src="../../img/1.jpg" alt=""></li>
            <li><img src="../../img/2.jpg" alt=""></li>
            <li><img src="../../img/3.jpg" alt=""></li>
            <li><img src="../../img/4.jpg" alt=""></li>
            <li><img src="../../img/5.jpg" alt=""></li>
        </ul>
        <!-- 小于符号 -->
        <button class="lbtn">&lt;</button>
        <!-- 大于符号 -->
        <button class="rbtn">&gt;</button>
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>

</html>
<script>
    //右侧按钮单击事件
    //信号量：全局变量，用来控制某一个li运动
    var idx = 0;

    //对右侧按钮的代码进行封装
    function rhandler() {
        //当前显示这张图片从left为 0移动到 -600的位置
        $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": -600 }, 500);
        //全局变量累加1，下一张图要进入容器里
        idx++;
        //三元表达式：如果idx大于4，就等于0；否则等于idx
        idx = idx > 4 ? 0 : idx;
        //下一张图进入
        $("ul li").eq(idx).css({ "left": 600 }).stop(true).animate({ "left": 0 }, 500);

        //底下的分页器也随之变化
        //addClass：给标签添加类名
        //removeClass：给标签移除类名
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    }
    //右侧按钮播放代码
    $(".rbtn").click(rhandler);

    //开启定时器让轮播图让轮播图自动轮播
    var timer = setInterval(rhandler, 1500);

    //鼠标移上停止自动播放
    $("div").mouseenter(function () {
        console.log("鼠标在上面");
        //清除定时器
        clearInterval(timer);
    });
    //鼠标移下恢复自动播放
    $("div").mouseleave(function () {
        console.log("鼠标在下面");
        //启动定时器
        timer = setInterval(rhandler, 1500);
    });

    //左侧按钮的单击事件
    $(".lbtn").click(lhandler);
    //对左侧按钮的代码进行封装
    function lhandler() {
        //当前显示这张图片从left为 0移动到 -600的位置
        $("ul li").eq(idx).css({ "left": 0 }).stop(true).animate({ "left": 600 }, 500);
        //全局变量累加1，下一张图要进入容器里
        idx--;
        idx = idx < 0 ? 4 : idx;
        //下一张图进入
        $("ul li").eq(idx).css({ "left": -600 }).stop(true).animate({ "left": 0 }, 500);

        //底下的分页器也随之变化
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    };

    //底下分页器的业务
    $("ol li").click(function () {
        //获取单击的那个分页器li索引值
        var index = $(this).index();
        console.log(index);
        //分两种情况：以3为中间值
        if (index > idx) {
            //当前显示这张图片动画
            $("ul li").eq(idx).css({ 
                "left":0
            }).stop(true).animate({ 
                "left": -600 
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left":600
            }).stop(true).animate({
                "left":0
            },500);
            //全局变量Idx重新赋值
            idx=index;
            //底下的分页器也随之变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
        }else{
            //当前显示这张图片动画
            $("ul li").eq(idx).css({ 
                "left":0
            }).stop(true).animate({ 
                "left": -600 
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left":600
            }).stop(true).animate({
                "left":0
            },500);
            //全局变量Idx重新赋值
            idx=index;
            //底下的分页器也随之变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
        }
    });
</script>

2：CSS：

*{
    margin: 0;
    padding: 0;
}
div{
    position: relative;
    width: 600px;
    height: 300px;
    border: 1px solid black;
    margin: 50px auto;
    /* 该元素若超出给定的宽高度，就会被隐藏，不占位 */
    overflow: hidden;
}
ul{
    position:absolute;
    width: 600px;
    height:300px;
    list-style:none;
}
img{
    width: 600px;
    height: 300px;
}
ul li{
    position: absolute;
    width: 600px;
    height: 300px;
    left: 600px;

}
.current{
    left: 0px;
}

.lbtn{
    position: absolute;
    width: 35px;
    height: 35px;
    left: 0px;
    top: 40%;
}
.rbtn{
    position: absolute;
    width: 35px;
    height: 35px;
    right: 0px;
    top: 40%;
}
ol {
    position: absolute;
    width: 150px;
    height: 20px;
    /* background: red; */
    left: 38%; 
    bottom: 10px;
}
ol li {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: brown;
    color: white;
    list-style:none;
    text-align: center;
    margin-right: 5px;
}
.cur{
    background-color: green;
    transform: scale(1.2);
}