老师,indicators不是没有定义吗

老师,indicators不是没有定义吗


function Slider(el, options) {
    var defaults = {
        initIndex: 0,
        speed: 300,
        hasIndicator: false
    };
    this.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.el = el;
    console.log(el);
    this.itemContainer = el.querySelector('.slider-item-container');
    this.items = this.itemContainer.children;
    this.distancePerSlide = this.items[0].offsetWidth;//获取每个slider-item的宽度

    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));//

    if (this.options.hasIndicator) {
        this._createIndicators();
        this._setIndicatorActive(this.index);
    }
}
Slider.prototype.to = function (index, cb) {
    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);

        if (typeof cb === 'function') {
            cb();
        }
    }, false);

    if (this.options.hasIndicator) {
        this._setIndicatorActive(this.index);
    }
};
Slider.prototype._setTransitionSpeed = function (speed) {
    this.itemContainer.style.transitionDuration = speed + 'ms';
};
Slider.prototype.prev = function (cb) {
    this.to(this.index - 1, cb);
};
Slider.prototype.next = function (cb) {
    this.to(this.index + 1, cb);
};
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.distancePerSlide;
};
Slider.prototype._createIndicators = 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');
};

Slider.prototype.getItemContainer = function () {
    return this.itemContainer;
};
Slider.prototype.getIndex = function () {
    return this.index;
};
Slider.prototype.getDistancePerSlide = function () {
    return this.distancePerSlide;
};


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2020-02-08 15:18:55

同学你好,是疑惑如下地方使用没有报错吗?

http://img1.sycdn.imooc.com//climg/5e3e6044098d2b9a06970102.jpg

这里this.indicators 已经是定义了,定义属性使用this  ,这里定义了属性只是没有赋值而已,所以不会报错。另外,如果没有解答疑惑,可以再详细描述一下。以便老师准确为你解答。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师