jQuery - 轮播图（四个屏幕） -

<div id="environmentSwiper_carousel">
    <dl id="environmentSwiper_unit">
        <dt><img src="https://www.dummyimage.com/560x300/123454/fff" alt=""></dt>
        <dt><img src="https://www.dummyimage.com/560x300/674389/fff" alt=""></dt>
        <dt><img src="https://www.dummyimage.com/560x300/901634/fff" alt=""></dt>
        <dt><img src="https://www.dummyimage.com/560x300/345893/fff" alt=""></dt>
        <dt><img src="https://www.dummyimage.com/560x300/565612/fff" alt=""></dt>
    </dl>
    <div class="btns">
        <a href="javascript:void(0);" class="leftBtn" id="environmentSwiper_leftBtn">上一页</a>
        <a href="javascript:void(0);" class="rightBtn" id="environmentSwiper_rightBtn">下一页</a>
    </div>
    <div id="environmentSwiper_circles">
        <dl>
            <dd class="cur"><img src="https://www.dummyimage.com/130x130/123454/fff" alt=""></dd>
            <dd><img src="https://www.dummyimage.com/130x130/674389/fff" alt=""></dd>
            <dd><img src="https://www.dummyimage.com/130x130/901634/fff" alt=""></dd>
            <dd><img src="https://www.dummyimage.com/130x130/345893/fff" alt=""></dd>
            <dd><img src="https://www.dummyimage.com/130x130/565612/fff" alt=""></dd>
        </dl>
    </div>
</div>

#environmentSwiper_carousel {
    width: 560px;
    height: 400px;
    margin: 50px auto;
    position: relative;
    /*CSS部分写完之后、加溢出隐藏*/
    overflow: hidden;
}

#environmentSwiper_unit {
    /*宽度必须足够宽*/
    width: 9999px;
    height: 300px;
    position: absolute;
    left: 0px;
    top: 0;
}

#environmentSwiper_unit dt {
    float: left;
    width: 560px;
    height: 300px;
}

#environmentSwiper_carousel .btns a {
    width: 30px;
    height: 70px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    color: #fff;
    background-color: rgba(0, 0, 0, 1);
    text-align: center;
}

#environmentSwiper_leftBtn {
    left: 10px;
}

#environmentSwiper_rightBtn {
    right: 10px;
}

#environmentSwiper_circles {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 90px;
}

#environmentSwiper_circles dl {
    /*宽度必须足够宽*/
    width: 9999px;
    height: 300px;
    position: absolute;
    left: 0px;
    top: 0;
}

#environmentSwiper_circles dd {
    float: left;
    width: 130px;
    height: 130px;
    margin: 0px 5px;
}

#environmentSwiper_circles dd.cur {
    border: 1px solid red;
    box-sizing: border-box;
}

// 获取元素
$('#environmentSwiper_circles dl').children("dd").clone().appendTo($('#environmentSwiper_circles dl'));

var $environmentSwiperunit = $("#environmentSwiper_unit");
var $environmentSwipercarousel = $("#environmentSwiper_carousel");
var $environmentSwiperleftBtn = $("#environmentSwiper_leftBtn");
var $environmentSwiperrightBtn = $("#environmentSwiper_rightBtn");
var $environmentSwipercircles = $("#environmentSwiper_circles dd");
var environmentSwiperamount = $environmentSwipercircles.length;
var environmentSwiperWidth = 818;

// 信号量
var environmentidx = 0;

// 克隆第一张图片clone()。
// 追加猫腻图到unit的节点上appendTo()。
$environmentSwiperunit.children("dt:first").clone().appendTo($environmentSwiperunit);


// 定时器
var environmentSwipertimer = setInterval(environmentSwiperrightFun, 2000);
// 鼠标进入清除定时器
$environmentSwipercarousel.mouseenter(function() {
    clearInterval(environmentSwipertimer);
});
// 鼠标离开开始定时器
$environmentSwipercarousel.mouseleave(function() {
    // 设表先关
    clearInterval(environmentSwipertimer);
    environmentSwipertimer = setInterval(environmentSwiperrightFun, 2000);
});


// 右按钮的点击事件
$environmentSwiperrightBtn.click(environmentSwiperrightFun);
// 函数声明
function environmentSwiperrightFun() {
    // 防流氓
    if ($environmentSwiperunit.is(":animated")) {
        return;
    }
    // 先拉动再验证
    // 信号量改变
    environmentidx++;
    $environmentSwiperunit.animate({
        "left": -environmentSwiperWidth * environmentidx
    }, 500, function() {
        if (environmentidx > (environmentSwiperamount / 2) - 1) {
            environmentidx = 0;
            // 瞬移
            $environmentSwiperunit.css("left", 0);
        }
    });
    $('#environmentSwiper_circles dl').animate({
        "left": -205 * environmentidx
    }, 500, function() {
        // 验证
        if (environmentidx > (environmentSwiperamount / 2) - 1) {
            environmentidx = 0;
            // 瞬移
            $('#environmentSwiper_circles dl').css("left", 0);
        }
    });
    // 小圆点改变
    // 有一瞬间idx = 5,奇迹上就是猫腻图片，也就是让小圆点去idx = 0
    var i = environmentidx <= (environmentSwiperamount / 2) - 1 ? environmentidx : 0;
    $environmentSwipercircles.eq(i).addClass("cur").siblings().removeClass("cur");

}

// 左按钮的点击事件
// 编程思想先验证后拉动
$environmentSwiperleftBtn.click(function() {
    // 防流氓
    if ($environmentSwiperunit.is(":animated")) {
        return;
    }
    // 信号量的改变
    environmentidx--;
    // 先验证
    if (environmentidx < 0) {
        environmentidx = (environmentSwiperamount / 2) - 1;
        // 瞬移到猫腻图
        $environmentSwiperunit.css("left", -environmentSwiperWidth * environmentSwiperamount);
    }
    $environmentSwiperunit.animate({
        "left": -environmentSwiperWidth * environmentidx
    }, 500);
    $('#environmentSwiper_circles dl').animate({
        "left": -205 * environmentidx
    }, 500, function() {
        // 验证
        if (environmentidx > (environmentSwiperamount / 2) - 1) {
            environmentidx = 0;
            // 瞬移
            $('#environmentSwiper_circles dl').css("left", 0);
        }
    });
    // 小圆点
    $environmentSwipercircles.eq(environmentidx).addClass("cur").siblings().removeClass("cur");
});

// 小圆点事件
$environmentSwipercircles.click(function() {
    // 信号量改变
    environmentidx = $(this).index();
    $environmentSwiperunit.stop(true).animate({
        "left": -environmentSwiperWidth * (environmentidx % 5)
    }, 500);

    $('#environmentSwiper_circles dl').animate({
        "left": -205 * environmentidx
    }, 500, function() {
        // 验证
        if (environmentidx > (environmentSwiperamount / 2) - 1) {
            environmentidx = 0;
            // 瞬移
            $('#environmentSwiper_circles dl').css("left", 0);
        }
    });
    // 小圆点改变
    $(this).addClass("cur").siblings().removeClass("cur");
});