感觉老师的逻辑有点乱

在图片轮播ui-slider这里，我感觉老师的逻辑有点乱，不够精简。下面提出自己的思路。

在前端就业班阶段1的步骤5：让页面动起来的JS基础部分，就有讲解过轮播图的实现。轮播的图片数量都是有限的，以本例子来说明，就是3张。

const NUM_LENGTH = 3; // 轮播图片的数量

那么，对应的下标值就是0、1、2。

在任意时刻，显示的图片和索引点都是唯一的。因此，对应的当前下标值currentIndex也是唯一的，只能是0、1、2中的一个。这个点是本例子的最核心思路。因为所有的功能，无非是修改currentIndex而已。

【1】自动轮播：currentIndex不断递增，显示下一张。

【2】向左按钮：currentIndex递减，显示上一张。

【3】向右按钮：currentIndex递增，显示下一张。

【4】点击索引点：获取被点击的索引点的index，并设置为currentIndex。

因此，只要把设置currentIndex的函数写好了，问题就解决了一大半。基于以上思路，我的程序如下。

写好setIndex函数，然后调用，达到各个功能实现。

HTML：

<!-- banner区的幻灯片 -->
<div class="banner__slider ui-slider">
    <!-- 幻灯片图片 -->
    <div class="ui-slider__wrap">
        <a href="#"><img src="img/banner_1.jpg" alt="官方微信平台"></a>
        <a href="#"><img src="img/banner_2.jpg" alt="官方订阅号"></a>
        <a href="#"><img src="img/banner_3.jpg" alt="预约挂号免排队"></a>
    </div>
    <!-- 左右按钮 -->
    <div class="ui-slider__btn ui-slider__btn-left"><</div>
    <div class="ui-slider__btn ui-slider__btn-right">></div>
    <!-- 索引点列表 -->
    <ul class="ui-slider__dotList">
        <li class="ui-slider__dotList__dot ui-slider__dotList__dot-current"></li>
        <li class="ui-slider__dotList__dot"></li>
        <li class="ui-slider__dotList__dot"></li>
    </ul>
</div>

CSS：

.ui-slider
{
    overflow: hidden;
    position: relative;
}

.ui-slider__wrap
{
    position: absolute;
    left: 0;
    width: 300%;
    height: 100%;
    transition: all .5s;
}

.ui-slider__wrap > a
{
    float: left;
}

.ui-slider__wrap > a,
.ui-slider__wrap img
{
    width: 544px;
    height: 414px;
}

/*幻灯片按钮*/
.ui-slider__btn
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 38px;
    height: 40px;
    line-height: 40px;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    background-color: rgba(126, 136, 146, .5);
    cursor: pointer;
}

.ui-slider__btn-right
{
    left: auto;
    right: 0;
}

.ui-slider__btn:hover
{
    font-size: 40px;
}

/*索引点列表*/
.ui-slider__dotList
{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

/*索引点*/
.ui-slider__dotList__dot
{
    display: inline-block;
    margin: 0 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 2px 2px #05F;
    background-color: rgba(126, 136, 146, .5);
    cursor: pointer;
}

.ui-slider__dotList__dot:hover
{
    transform: scale(1.2);
}

/*当前索引点的样式*/
.ui-slider__dotList__dot-current
{
    background-color: #F35;
}

JS：

// 幻灯片模块
$.fn.uiSlider = function()
{
    let currentIndex = 0, // 当前下标值
        intervalID = 0, // 间歇调用ID
        intervalTime = 2500; // 间歇调用时间

    const NUM_LENGTH = 3; // 轮播图片的数量

    // 开启自动轮播
    function startAutoplay()
    {
        intervalID = setInterval(function()
        {
            setIndex((currentIndex + 1) % NUM_LENGTH);
        }, intervalTime);
    }

    // 结束自动轮播
    function endAutoplay()
    {
        if (intervalID)
        {
            clearInterval(intervalID);
        }
    }

    // 设置当前下标值
    function setIndex(newIndex)
    {
        let dots = $(".ui-slider__dotList__dot"); // 索引点集合

        // 清除旧的索引点
        dots.eq(currentIndex).removeClass("ui-slider__dotList__dot-current");

        // 设置新下标
        currentIndex = newIndex;

        // 设置新的索引点
        dots.eq(currentIndex).addClass("ui-slider__dotList__dot-current");

        // 通过改变定位显示对应的图片
        $(".ui-slider__wrap").css({"left": (-544 * currentIndex) + "px"});
    }

    // 向左按钮的点击事件
    $(".ui-slider__btn-left").on("click", function()
    {
        setIndex((currentIndex - 1 + NUM_LENGTH) % NUM_LENGTH);
    });

    // 向右按钮的点击事件
    $(".ui-slider__btn-right").on("click", function()
    {
        setIndex((currentIndex + 1) % NUM_LENGTH);
    });

    // 索引点的点击事件
    $(".ui-slider__dotList").on("click", "li", function()
    {
        setIndex($(this).index());
    });

    // 鼠标移动到上面，停止自动轮播
    $(".ui-slider").on("mouseenter", endAutoplay);

    // 鼠标离开，开启自动轮播
    $(".ui-slider").on("mouseleave", startAutoplay);

    // 开启自动轮播
    startAutoplay();
};



$(document).ready(function()
{
    $(".ui-search").uiSearch();

    $(".ui-tab").uiTab();

    $("body").uiBackToTop();

    $(".ui-slider").uiSlider();
});

在这里，我还不得不吐槽一下，或者说是提一下建议，讲解老师的数学水平不行。对于自增自减后下标的越界判断，一般是使用取余运算，计算机最擅长的就是计算，这样代码才精简。而使用if语句则不精简。这些是很基本的技巧，基本上大学里的程序设计课程、数据结构课程，老师在上课时往往都有讲到。

(currentIndex - 1 + NUM_LENGTH) % NUM_LENGTH
(currentIndex + 1) % NUM_LENGTH

而视频中讲解的老师，不是有几年开发经验的工作者吗？怎么会犯这种“兵家之大忌”？居然用if。希望慕课网能够持续改进质量，精益求精，才能收获更多慕粉。