老师我用ES6语法自己重新写了一次 麻烦帮忙看下有什么需要改进
<!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/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body>
<div class="slider" id="slider">
<div class="slider-item-container">
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/1.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/2.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/3.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/4.jpg" alt="slider" class="slider-img">
</a>
</div>
<div class="slider-item">
<a href="###" class="slider-link">
<img src="img/5.jpg" alt="slider" class="slider-img">
</a>
</div>
</div>
</div>
<button id="prev">prev</button>
<button id="next">next</button>
<script>
class Slider {
constructor(el, options = {}) {
Object.assign(this, {
initIndex: 0,
speed: 300,
hasIndicator: false
}, options);
this.options = options;
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;
this.index = this._adjustIndex(this.options.initIndex);
this.move(this.getDistanceByIndex(this.index));
if (this.options.hasIndicator) {
this._createIndicators();
this._setIndicatorsActive(this.index);
}
}
to(index) {
this.index = index;
this._setTransitionSpeed(this.options.speed);
this.move(this.getDistanceByIndex(this.index));
const that = this;
this.itemContainer.addEventListener('transitionend',()=>{
that._setTransitionSpeed(0);
},false);
if(this.options.hasIndicator){
this._setIndicatorsActive(this.index);
}
}
prev() {
this.to(this.index - 1);
}
next() {
this.to(this.index + 1);
}
_setTransitionSpeed(speed){
this.itemContainer.style.transitionDuration = speed + 'ms';
}
_adjustIndex(index) {
if (index < this.minIndex) {
index = this.minIndex;
} else if (index > this.maxIndex) {
index = this.maxIndex
}
return index;
}
move(distance) {
this.itemContainer.style.transform = 'translate3d(' + distance + 'px,0,0)'
}
getDistanceByIndex(index) {
return -index * this.distancePerSlider;
}
_createIndicators() {
const indicatorContainer = document.createElement('div');
let html = '';
indicatorContainer.className = 'slider-indicator-container';
for (let i = 0; i <= this.maxIndex; i++) {
html += '<span class="slider-indicator"></span>';
}
indicatorContainer.innerHTML = html;
this.el.appendChild(indicatorContainer);
}
_setIndicatorsActive(index) {
this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');
for (let 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>
const slider = new Slider(document.getElementById('slider'), {
initIndex: 2,
speed: 300,
hasIndicator: true
});
document.getElementById('prev').addEventListener('click', () => {
slider.prev();
}, false);
document.getElementById('next').addEventListener('click', () => {
slider.next();
}, false);
</script>
</body>
</html>
15
收起
正在回答
2回答
同学你好,可以设置属性来保存默认参数,合并后再使用。参考:
自己试一下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星