手写轮播

1 css

<style>
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    div,
    img,
    span,
    i,
    pre,
    form,
    fieldset,
    legend,
    button,
    input,
    textarea,
    th,
    td,
    strong,
    input,
    label,
    textarea,
    figure,
    a,
    select {
        margin: 0;
        padding: 0;
        font-family: Verdana, "Lantinghei SC", "Hiragino Sans GB", "Microsoft Yahei", Helvetica, arial, sans-serif;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
</style>
<style>

    .slideBox{
        position: relative;
        margin: 100px auto;
        width: 1000px;
        height: 402px;
        border: 1px solid #2C8DFB;
        overflow: hidden;
    }
    .slideBox ul{
        width: 500%;
        font-size: 0;
        border: 1px solid red;
        box-sizing: content-box;
    }
    .slideBox ul li{
        width: 20%;
        height: 402px;
        display: inline-block;
    }
    .slideBox ul li img{
        width: 100%;
    }
    .btn-ctrl{
        position: absolute;
        z-index: 100;
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        background: red;

        color: #fff;
    }
    #btn-prev{
        top: 50%;
        left: 5%;
    }
    #btn-next{
        top: 50%;
        right: 5%;
    }
    .dots{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding: 3px;
    }
    .dot {
        width: 12px;
        height: 12px;
        background: #fff;
        float: left;
        border-radius: 6px;
        margin: 0 3px;
    }
    .current {
        background: red;
    }
</style>

2 html

    <section class="slideBox">
        <div id="btn-prev" class="btn-ctrl"><</div>
        <div id="btn-next" class="btn-ctrl">&gt;</div>
        <ul id="u25" class="u25">
            <li><img src="images/fade1.jpg" alt=""></li>
            <li><img src="images/fade2.jpg" alt=""></li>
            <li><img src="images/fade3.jpg" alt=""></li>
            <li><img src="images/fade4.jpg" alt=""></li>
            <li><img src="images/fade1.jpg" alt=""></li>
        </ul>
        <div class="dots">
            <div class="dot current"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

3  js

   //自动播放
        autoSlide()
        var timer;
        function autoSlide() {
            timer = setInterval(function () {
                $('#btn-next').click()
            },1000);
        }
        var picIndex = 0;
        var length = $("#u25 li").length;
        //右边按钮
        $('#btn-next').click(function () {
            if (picIndex === length - 1) { //4
                picIndex = 0;
                $('#u25').css({'margin-left': '0px'});
            }
            picIndex++;
            console.log(picIndex);
            var left = -picIndex * 1000 + 'px';
            $("#u25").stop().animate({'margin-left': left}); // 在使用jquery的animate动画时，如果多次触发动画，会出现动画错乱的现象，需要 先暂停再执行（使用stop()）
            //小圆点控制
            if(picIndex === length - 1){ //4
                $(".dots .dot").eq(0).addClass('current').siblings().removeClass('current')
            }else{
                $(".dots .dot").eq(picIndex).addClass('current').siblings().removeClass('current')
            }

        })
        //左边按钮
        $('#btn-prev').click(function () {
            if (picIndex === 0) {
                picIndex = 4;
                $('#u25').css({'margin-left': '-4000px'});
            }
            picIndex--;
            console.log(picIndex);
            var left = -picIndex * 1000 + 'px';
            $("#u25").stop().animate({'margin-left': left});
            if(picIndex === 0){ //4
                $(".dots .dot").eq(3).addClass('current').siblings().removeClass('current')
            }else{
                $(".dots .dot").eq(picIndex).addClass('current').siblings().removeClass('current')
            }
        })
        //为小圆点绑定鼠标点击事件
        $('.dots .dot').mousedown(function () {
            var dLi = $(this).index();
            var left = - dLi * 1000 + 'px';
            $("#u25").stop().animate({'margin-left': left});
            $(".dots .dot").eq(dLi).addClass('current').siblings().removeClass('current')
        })
        //停止和恢复切换
        $('.slideBox').mouseover(function () {
            clearInterval(timer)
        })
        $('.slideBox').mouseout(function () {
            autoSlide()
        })