这节课结束之后，幻灯片案例有这个错误，如何解决。只显示了第一张幻灯片

相关截图：

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/slider.css">
</head>
<body>
<div id="slider" class="slider">
    <div class="slider-item-container">
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="images/1.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="images/2.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="images/3.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="images/4.jpg" alt="slider" class="slider-img">
            </a>
        </div>
        <div class="slider-item">
            <a href="###" class="slider-link">
                <img src="images/5.jpg" alt="slider" class="slider-img">
            </a>
        </div>
    </div>
    <!-- <div class="slider-indicator-container">
        <span class="slider-indicator"></span>
        <span class="slider-indicator"></span>
        <span class="slider-indicator"></span>
        <span class="slider-indicator"></span>
        <span class="slider-indicator"></span>
    </div> -->

</div>
<button id="prev">prev</button>
<button id="next">next</button>

<script>
    // 封装一个构造函数 类Slider传入两个参数  方法写在构造函数的原型上
    function Slider(el, options) {
        //定义默认参数值
        var defaults = {
            initIndex:0,
            speed:300,
            hasIndicator:false
        };
        // 实际使用参数挂在this上 因为要在原型上使用
        this.options = {};
        //给options对象上添加属性 处理参数
        this.options.initIndex = typeof options.initIndex !== 'undefined'?
            options.initIndex : defaults.initIndex;
        this.options.speed = typeof options.speed !== 'undefined'?
            options.speed : defaults.speed;
        this.options.hasIndicator = typeof options.hasIndicator !== 'undefined'?
            options.hasIndicator : defaults.hasIndicator;
        // 获取要用的元素 都挂在this上面 公共的
        this.el = el;
        this.itemContainer = el.querySelector('.slider-item-container');
        this.items = this.itemContainer.children;
        this.distancePerSlider = this.items[0].offsetWidth; //每一次切换幻灯片的距离

        //索引值应该有上下限
        this.minIndex = 0;
        this.maxIndex = this.items.length-1; //幻灯片的个数减去1
        // this.index = this.options.initIndex;
        this.index = this._adjustIndex(this.options.initIndex); 

        //移动到指定索引
        this.move(this.getDistanceByIndex(this.index)); //根据索引判断距离，把获取的距离传入move方法中

        // 是否需要指示器indicator
        if(this.options.hasIndicator){
            this._creatIndicators();
            this._setIndcatorActive(this.index);//根据传入的索引值点亮对应的指示器
        }
    }
    //切换到给定索引的幻灯片上,传入索引
    Slider.prototype.to = function(index){
        this.index = index;

        this._setTransitionSpeed(this.options.speed);
        this.move(this.getDistanceByIndex(this.index));

        var self = this;
        this.itemContainer.addEventListener('transitionend',function(){
            self._setTransitionSpeed(0);
        },false);

        if(this.options.hasIndicator){
            this._setIndcatorActive(this.index);
        }
    };
    Slider.prototype.prev = function(){
        this.to(this.index-1);
    }; //切换到上一张幻灯片

    Slider.prototype.next = function(){
        this.to(this.index+1);
    }; //切换到下一张幻灯片

    Slider.prototype._adjustIndex = function(index) {
        if(index < this.minindex) {
            index = this.minIndex;
        } else if (index < this.maxIndex){
            index = this.maxIndex;
        }
        return index;
    }; //较正索引的方法，让它保持在最小和最大索引值之间
    Slider.prototype.move = function(distance){
        this.itemContainer.style.transform ='translate3d(' +distance+ 'px, 0, 0)'
    };
    Slider.prototype.getDistanceByIndex = function(index){
        return -index * this.distancePerSlider;
    };
    //创建相应html结构
    Slider.prototype._creatIndicators = function() {
        var indicatorContainer = document.createElement('div');
        var html='';

        indicatorContainer.className = 'slider-indicator-container';
        for(var i=0; i<=this.maxIndex; i++){
            html += '<span class="slider-indicator"></span>';
        }
        indicatorContainer.innerHTML = html;
        this.el.appendChild(indicatorContainer);
    }; 

    Slider.prototype._setIndicatorActive = function (index) {
            this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');
            for (var i = 0; i < this.indicators.length; i++) {
                this.indicators[i].classList.remove('slider-indicator-active');
            }

            this.indicators[index].classList.add('slider-indicator-active');
        };
</script>
<script>
    var slider = new Slider(document.getElementById('slider'), {
            initIndex: 0, // 初始显示第几张幻灯片，从0开始
            speed: 300, // 幻灯片的切换速度
            hasIndicator: true // 是否需要指示器indicator
        });

    document.getElementById('prev').addEventListener('click',function() {
        slider.prev();
    },false);
    document.getElementById('next').addEventListener('click',function() {
        slider.next();
    },false);
</script>
</body>
</html>

KaFe_Ming 2021-06-22

源自：移动端事件 4-4 幻灯片的核心部分（下）

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-06-22 16:16:04

同学你好，因为_setIndicatorActive单词拼写错误，所以出现报错，建议修改：

经过上述修改后，因为代码中没有定义_setTransitionSpeed方法，点击按钮时，控制台出现如下报错：

建议添加上这个方法，如下：

最后，需要注意的一点是：课程中主要是想让大家理解移动端轮播图的实现原理是什么，因为实际开发中，很少会手写这样的轮播图，所以老师就没有处理由最后一张切换到第一张，和由第一张切换到最后一张的情况，一般都会使用现成的插件，比如swiper，后面的课程中会有详细的讲解，而且最后的项目也是结合swiper来实现轮播效果的。如下：

祝学习愉快~

收起回答

KaFe_Ming 提问者 #1

实际开发中轮播图幻灯片这类问题都一般是依靠什么完成的

2021-06-23 16:18:02
好帮手慕慕子回复提问者 KaFe_Ming #2

同学你好，实际开发中，一般都是使用插件来实现轮播图效果，例如：后面课程中讲解的Swiper插件，同学跟着课程安排继续往后学习就可以啦~
祝学习愉快~

2021-06-23 17:18:55