jQuery----banner图（图片循环播放）

自动轮播，可点击上一张下一张。效果如下：

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>banner自动轮播</title>
    <style>
        .wrapper {
            width: 600px;
            height: 350px;
            /* border: 1px solid red; */
            position: relative;
        }

        /* 5张图片叠加到一块 */
        .wrapper img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .wrapper img:nth-of-type(1) {
            display: block;
        }

        /* 小圆点 */
        .btn {
            width: 150px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            left: 225px;
            bottom: 10px;
            z-index: 100;
        }
        .btn span {
            display: block;
            width: 10px;
            height: 10px;
            border: 3px solid white;
            border-radius: 50%;
        }
        /* 左右箭头 */
        .wrapper a {
            text-decoration: none;
            font-size: 50px;
            color: rgb(149, 130, 130);
            position: absolute;
            top: 35%;
        }
        .wrapper a:nth-of-type(1) {
            left: 10px;
        }
        .wrapper a:nth-of-type(2) {
            right: 10px;
        }
        .active {
            background-color: rgb(150, 139, 139);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="contain">
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
            <img src="images/3.jpg" alt="" />
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
        </div>
        <div class="btn">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:void(0);">&lt;</a>
        <a href="javascript:void(0);">&gt;</a>
    </div>
    <script src="js/jquery-1.3.2.min.js"></script>
    <script>
        var index = 0;
        // 点击上一张
        $("a:first").click(function () {
            prev_pic();
        });
        // 点击下一张
        $("a:last").click(function () {
            next_pic();
        });
        // 悬浮停止
        $(".wrapper").mouseover(function () {
            clearInterval(id);
        });
        $(".wrapper").mouseout(function () {
            autoplay();
        });

        // 下一张
        function next_pic() {
            index++;
            if (index > 4) {
                index = 0;
            }
            addStyle();
        }
        // 上一张
        function prev_pic() {
            index--;
            if (index < 0) {
                index = 4;
            }
            addStyle();
        }
        // 控制图片显示隐藏,小圆点背景色
        function addStyle() {
            $("img").eq(index).fadeIn();
            $("img").eq(index).siblings().fadeOut();
            $("span").eq(index).addClass("active");
            $("span").eq(index).siblings().removeClass("active");
        }
        // 自动轮播
        var id;
        autoplay();
        function autoplay() {
            id = setInterval(function () {
                next_pic();
            }, 3000);
        }
    </script>
</body>

</html>