十八、三位置法

• 滚动轮播图小圆点事件存在一个弊端：

  • 当鼠标隔几张图片跳转到其他图片时，会将中间的图片都过一遍。

• 三位置法小圆点事件存在一个弊端：

  • 当鼠标在小圆点上来回移动，防流氓stop(true)无法杜绝动画

18.1 css

更改内容：

① 删除：

/* 滚动轮播图的关键是所有图片并排在一起 
    unit的宽要足够
*/
.carousel .unit {
    width: 9999px;
    position: absolute;
    left: 0;
    top: 0;
}

②更改：让所有图片移动到显示位置之后，然后让第一张出现

/* 候场位置 */
.carousel .unit li {
    position: absolute;
    left: 220px;
    width: 220px;
    height: 150px;
}
/* 登场位置 */
.carousel .unit li:first-child {
    left: 0;
}

18.2 jquery

不使用猫腻图

先将图片放到候场位置，再拉动

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $leftBtn = $("#leftBtn");
    var $rightBtn = $("#rightBtn");
    var $imgs = $("#unit li");
    var $circles = $("#circles ol li");
    var $carousel = $("#carousel");

    // 定义length
    var length = $circles.length;
    // 定义信号量
    var idx = 0;

    // 开启定时器 平时图片轮播，相当于右按钮事件
    var timer = setInterval(rightBtn, 2000);
    // 鼠标移入 清除定时器
    $carousel.mouseenter(function () {
        clearInterval(timer);
    });
    // 鼠标离开 开启定时器
    $carousel.mouseleave(function () {
        // 设表先关
        clearInterval(timer);
        // 重新赋值timer
        timer = setInterval(rightBtn, 2000);
    });

    // 右按钮点击事件 将函数提取出来
    $rightBtn.click(rightBtn);
    function rightBtn() {
        // 防流氓
        if ($imgs.is(":animated")) {
            return;
        }
        // 当前图片退场 想要右边的图片 向左拉
        $imgs.eq(idx).animate({"left": -220},600);
        // 信号量改变
        idx++;
        // 边界判定
        if (idx > length - 1) {
            // idx归0
            idx = 0;
        }
        // 下一张图片登场 先将图片放到候场位置，再拉动
        $imgs.eq(idx).css("left",220).animate({"left": 0},600);
        // 当前小圆点加cur 它的兄弟去掉cur
        $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
        console.log(idx);  // 查看图片顺序       
    }
    // 左按钮点击事件
    $leftBtn.click(leftBtn);
    function leftBtn() {
        // 防流氓
        if (!$imgs.is(":animated")) {
                // 当前图片退场 想要左边的图片 当前图片向右拉
            $imgs.eq(idx).animate({"left": 220},600);
            // 信号量改变
            idx--;
            // 边界判定
            if (idx < 0) {
                // idx归0
                idx = length - 1;
            }
            // 下一张图片登场 先将图片放到候场位置，再拉动
            $imgs.eq(idx).css("left",-220).animate({"left": 0},600);
            // 当前小圆点加cur 它的兄弟去掉cur
            $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
            console.log(idx);  // 查看图片顺序     
        }
    };
    // 小圆点事件 鼠标移入
    $circles.mouseenter(function () {
        // 定义一个变量用于保存触发事件的序号，与当前信号量作比较
        var i = $(this).index();
        if (i > idx){
            // 此时相当于右按钮事件，图片应从右边进入
            // 当前图片退场 想要右边的图片 向左拉
            $imgs.eq(idx).stop(true).animate({"left": -220},600);
            // 信号量改变
            idx = i;
            // 新图片登场 先将图片放到候场位置，再拉动
            $imgs.eq(idx).css("left",220).stop(true).animate({"left": 0},600);
            console.log(idx);  // 查看图片顺序   
        }else if(i < idx){
            // 此时相当于左按钮事件，图片应从左边进入
            // 当前图片退场 想要左边的图片 向右拉
            $imgs.eq(idx).stop(true).animate({"left": 220},600);
            // 信号量改变
            idx = i;
            // 新图片登场 先将图片放到候场位置，再拉动
            $imgs.eq(idx).css("left",-220).stop(true).animate({"left": 0},600);
            console.log(idx);  // 查看图片顺序 
        }
            // 当前小圆点加cur 它的兄弟去掉cur
            $(this).addClass("cur").siblings().removeClass("cur");
    });
</script>