jQuery - 轮播图（复制粘贴版） -

    

        

        

        

    
    

        上一页
        下一页
    
    

        

            

            

            

        
    

---

#environmentSwiper_carousel {
    width: 560px;
    height: 300px;
    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%;
    height: 20px;
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 30px;
}

#environmentSwiper_circles dd {
    float: left;
    width: 20px;
    height: 20px;
    margin: 0px 5px;
    background-color: orange;
}

#environmentSwiper_circles dd.cur {
    background-color: red;
}

---

// 获取元素
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 = 560;

// 信号量
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
    }, 400, function() {
        if (environmentidx > environmentSwiperamount - 1) {
            environmentidx = 0;
            // 瞬移
            $environmentSwiperunit.css("left", 0);
        }
    });

    // 小圆点改变
    // 有一瞬间idx = 5,奇迹上就是猫腻图片，也就是让小圆点去idx = 0
    var i = environmentidx <= environmentSwiperamount - 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 - 1;
        // 瞬移到猫腻图
        $environmentSwiperunit.css("left", -environmentSwiperWidth * environmentSwiperamount);
    }
    $environmentSwiperunit.animate({
        "left": -environmentSwiperWidth * environmentidx
    }, 500);
    // 小圆点
    $environmentSwipercircles.eq(environmentidx).addClass("cur").siblings().removeClass("cur");
});

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