感觉老师的逻辑有点乱

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

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

1	`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。希望慕课网能够持续改进质量，精益求精，才能收获更多慕粉。

我学习太差被关起来了 2020-04-22

源自：实战：挂号平台首页 5-8 首页.UI组件-UiSlider（3）

收起

2回答

提问者我学习太差被关起来了 2020-04-22 15:37:07

取余运算在很多地方也用到，并不是什么难以理解的内容，也是入门级技巧。如果视频中的老师用这种方法会更好，让同学们可以多掌握一个小技巧。

收起回答

好帮手慕夭夭 2020-04-22 11:42:05

同学你好，非常感谢你用心为慕课网提出建议。同学是一个基础好，聪明且思维缜密的人。你提出的这些方式都是很好的，但是老师不得不解释一下，教学课程不能只求精致的代码。因为就业班面向的都是零基础的学生，有些可能还是从其他专业转过来学习前端的。所以大部分小白都是没有计算机基础或者是基础很差的人。同学觉得代码写的不精致。但是对于其他人来说，这个案例很难，逻辑听不懂。当中还有一些人学习几遍都掌握不了。

学习是需要循序渐进的。初学时，我们不需要考虑代码是否啰嗦，逻辑是否复杂，性能是不是更好的问题。而是要考虑怎么把这个知识掌握，把效果做出来就行。那么随着基础的掌握，后续再去考虑代码优化，逻辑精简等问题。等这些做好了之后，可能后面就要去考虑性能啊，可维护性，复用性问题等等...所以你觉得这个代码不精致老师也同意，尤其是第一个阶段的代码，老师也会觉得不精致。等你工作多年之后，也许会觉得现在的代码也有很多问题。这都是建立在一定基础上，才会有这样的认知。但是不能一开始就确立一个高水准，学习就是从不精致走向精致的一个过程。

当然了，同学有一些好的想法，我们也非常欢迎你在问答区多分享一些。同学和老师互相学习，互相进步，是非常好的一件事情。另外，同学提出的建议老师也会转达给课程制作部门，会进行整体的评估。以后制作课程时，在大部分学生能够接受的程度上，尽量会更加精致一点。最后再次感谢同学能够给我们提出宝贵的建议。

祝学习愉快 ~

收起回答