jquery 轮播图，实现方式为：显示隐藏的方式-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 380px;
            height: 260px;
            position: relative;
        }

        .box-img {
            width: 380px;
            height: 260px;
            position: absolute;
            top: 0;
            left: 0;

            /*//图片都隐藏*/
            opacity: 0;
            transition: all 1.5s;
        }

        /*第一张显示*/
        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-left {
            width: 35px;
            height: 70px;
            color: #ccc;
            position: absolute;
            top: 100px;
            left: 0;
            line-height: 70px;

        }

        .box-right {
            width: 35px;
            height: 70px;
            color: #ccc;
            position: absolute;
            top: 100px;
            right: 0;
            line-height: 70px;
        }

        .box-left:hover, .box-right:hover {
            background: #00000050;
            color: #fff;
        }

        .box-zhiding {
            position: absolute;
            bottom: 10px;
            right: 10px;

        }

        .box-zhiding ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box-zhiding li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background: #ccc;
            float: left;
            margin-right: 10px;
        }

        .box-zhiding li:hover {
            background: #fff;
        }

        .current {
            background: red !important;
        }
    </style>
</head>
<body>

<div class="box">
    <div><img class="box-img" src="1.jpg" alt="" title="1"></div>
    <div><img class="box-img" src="2.jpg" alt="" title="2"></div>
    <div><img class="box-img" src="3.jpg" alt="" title="3"></div>
    <div><img class="box-img" src="4.jpg" alt="" title="4"></div>
    <div><img class="box-img" src="5.jpg" alt="" title="5"></div>

    <div class="box-left"> &lt;</div>
    <div class="box-right"> &gt;</div>

    <div class="box-zhiding">
        <ul>
            <li class="botton current"></li>
            <li class="botton"></li>
            <li class="botton"></li>
            <li class="botton"></li>
            <li class="botton"></li>
        </ul>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var length = $('.box-img').length - 1;
        dingshi()

        var f;

        function dingshi() {
            f = setInterval(function () {
                // 到头了
                if (index == length) {
                    index = 0;
                    show(index)
                } else {
                    index++;
                    show(index)
                }
            }, 4000)
        }


        $('.box-left').click(function () {
            clearInterval(f)
            if (index == 0) {
                index = length;
                show(index)
                dingshi()
            } else {
                index--;
                show(index)
                dingshi()
            }

        })
        $('.box-right').click(function () {
            clearInterval(f)
            if (index == length) {
                index = 0;
                show(index)
                dingshi()
            } else {
                index++;
                show(index)
                dingshi()
            }

        })

        $('.botton').click(function () {
            clearInterval(f)
            var indexx = $(this).index()
            index = indexx
            show(index)
            dingshi()
        })

        function show(index) {
            $('.box-img').css("opacity", "0");
            $('.box-img').eq(index).css("opacity", "1");

            $('.botton').removeClass('current').eq(index).addClass('current');

        }
    })
</script>

</body>
</html>