老师,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
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星