纯jQuery实现轮播带箭头话不多说直接上代码

话不多说直接上代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自写jquery轮播图带左右箭头</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .out-box {
            width: 600px;
            height: 250px;
            margin: 0 auto;
            position: relative;
        }

        .banner {
            width: 600px;
            height: 220px;
            margin: 0 auto;
            position: relative;
        }

        .banner-bar {
            width: 550px;
            height: 220px;
            overflow: hidden;
            position: relative;
        }

        .banner-bar .banner-ul {
            width: 3000px;
        }

        .banner-bar .banner-ul li {
            width: 550px;
            height: 220px;
            float: left;
        }

        .prev {
            position: absolute;
            top: 100px;
            left: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        .next {
            position: absolute;
            top: 100px;
            right: 10px;
            cursor: pointer;
            font-size: 20px;
        }

        .clearfix {
            zoom: 1
        }

        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table
        }

        .clearfix:after {
            clear: both
        }

        .pageBtn {
            width: 70px;
            height: 10px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -35px;
        }

        .dot {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            background-color: #ded8d8;
            margin-right: 10px;
        }

        .active {
            background-color: #333333;
        }
    </style>

</head>

<body>
    <div class="out-box">
        <div class="banner">
            <div class="prev">&lt;</div>
            <div class="banner-bar">
                <ul class="banner-ul">
                    <li style="background: pink;" data-index="0">1</li>
                    <li style="background: blueviolet;" data-index="1">2</li>
                    <li style="background: green;" data-index="2">3</li>
                    <li style="background: blue;" data-index="3">4</li>
                </ul>

            </div>

            <div class="next">&gt;</div>
        </div>
        <div class="pageBtn clearfix">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot" style="margin-right: 0;"></div>
        </div>
    </div>


</body>

</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        var timer = '';
        // 右箭头点击事件
        $(".next").click(function () {
            if (!$(".banner-ul li:first").is(":animated")) {
                $(".banner-ul li:first").animate({ 'marginLeft': '-=550px' }, 500, function () {//此大小为轮播部分的大小 如果是上下轮播就是marginTop
                    $(".banner-ul li:first").css('marginLeft', 0); //如果是上下轮播就是marginTop
                    $('.banner-ul').append($(".banner-ul li:first"));
                    var index = $(".banner-ul li:first").attr("data-index");

                    $(".pageBtn .dot").eq(index).addClass("active").siblings().removeClass("active"); //小圆点跟着轮播

                });
            }
        });
        // 左箭头点击事件

        $(".prev").click(function () {
            clearInterval(timer);
            if (!$(".banner-ul li:first").is(":animated")) {
                $('.banner-ul').prepend($(".banner-ul li:last"));
                $('.banner-ul li:first').css({ 'marginLeft': '-550px' }); //此大小为轮播部分的大小 如果是上下轮播就是marginTop
                $(".banner-ul li:first").animate({ 'marginLeft': '+=550px' }, 500, function () {
                    $(".banner-ul li:first").css('marginLeft', '0px'); //如果是上下轮播就是marginTop
                    var index = $(".banner-ul li:first").attr("data-index");
                    $(".pageBtn .dot").eq(index).addClass("active").siblings().removeClass("active");//小圆点跟着轮播

                });
            }
        });

        timer = setInterval(function () {
            $(".next").click();

        }, 3000);

        $(".banner-bar").mouseenter(function () {
            clearInterval(timer);
        });

        $(".banner-bar").mouseleave(function () {
            timer = setInterval(function () {
                $(".next").click();
            }, 3000)
        });
    });
</script>