老师我用ES6语法自己重新写了一次 麻烦帮忙看下有什么需要改进

老师我用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>


正在回答

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

2回答

 同学你好,可以设置属性来保存默认参数,合并后再使用。参考:

http://img1.sycdn.imooc.com//climg/60bf0852097b80ad08990265.jpg

自己试一下,祝学习愉快!

好帮手慕星星 2021-06-08 11:25:55

同学你好,用es6重写的没问题,很棒!

另外如果想做边界限制的话,可以调用_adjustIndex方法修正,如下

http://img1.sycdn.imooc.com//climg/60bee3390988b80807570169.jpg

避免报错。祝学习愉快!

  • 提问者 咸鱼王派大星 #1

    老师我调用了_adjustIndex方法但是报错了

    2021-06-08 11:34:26
  • 提问者 咸鱼王派大星 #2

    老师上面那个已经解决了,,还有个问题就是设置用户输入的默认参数有其他的什么方法嘛

    2021-06-08 11:37:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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