使用Jquery制作轮播图（自动播放，点击切换暂停，鼠标放置暂停，移开继续）

最新推荐文章于 2023-09-06 13:44:59 发布

沉淀在网页

最新推荐文章于 2023-09-06 13:44:59 发布

阅读量2.6k

点赞数 1

分类专栏：前端样式文章标签： jQuery html 轮播图 JavaScript js

本文链接：https://blog.csdn.net/QQ1443003435/article/details/100572870

版权

前端样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

**
在这里插入图片描述

代码部分

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 1000px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        img {
            width: 1000px;
            height: 500px;
        }
        ul {
            display: flex;
        }
        li {
            list-style: none;
        }
        p {
            width: 100%;
            height: 70px;
            position: absolute;
            top: 50%;
            left: 0;
            display: flex;
            justify-content: space-between;
        }
        .left {
            display: inline-block;
            width: 40px;
            height: 70px;
            font-size: 50px;
            color: #fff;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        .right {
            display: inline-block;
            width: 40px;
            height: 70px;
            font-size: 50px;
            color: #fff;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        .index {
            position: absolute;
            display: block;
            min-width: 40px;
            height: 50px;
            background-color: rgba(255,255,255,0.5);
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <img src="http://img.daimg.com/uploads/allimg/190901/1-1ZZ11644520-L.jpg" alt="">
        </li>
        <li>
            <img src="http://img.daimg.com/uploads/allimg/190823/1-1ZR31541010-L.jpg" alt="">
        </li>
        <li>
            <img src="http://img.daimg.com/uploads/allimg/190902/1-1ZZ22354350-L.jpg" alt="">
        </li>
    </ul>
    <p>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </p>
    <span class="index"></span>
</div>

<script>
    $(function () {
        var timer;
        var current = 0;
        var x = $("ul").children().length;
        show(1);
        $(".index").html((current + 1) + "/" + x);
        $(".left").click(function () {
            show(2);
            current--;
            if(current < 0) {
                current = (x - 1);
            }
           $("ul").animate({marginLeft: parseFloat($("img").width()) * -current + "px"});
            $(".index").html((current + 1) + "/" + x);
        });
        $(".right").click(function () {
            show(2);
            current++;
            if(current > (x - 1)) {
                current = 0;
            }
            $("ul").animate({marginLeft: parseFloat($("img").width()) * -current + "px"});
            $(".index").html((current + 1) + "/" + x);
        });
        function show(status) {
            if(status == 1) {
                timer = setInterval(function () {
                    current++;
                    if(current > (x - 1)) {
                        current = 0;
                    }
                    $("ul").animate({marginLeft: parseFloat($("img").width()) * -current + "px"});
                    $(".index").html((current + 1) + "/" + x);
                },5000);
            }else {
                clearInterval(timer);
            }
        }
        $(".box").hover(function () {
            $(".left").fadeIn();
            $(".right").fadeIn();
            show(2);
        });
        $(".box").mouseleave(function () {
            $(".left").fadeOut();
            $(".right").fadeOut();
            show(1);
        });
    })
</script>
</body>
</html>

以上