求助:将以下ES5格式代码转换为ES6格式!!!
function Slider(id){
//属性
// 1. 通过id获取元素对象(大盒子)
this.bigBox = document.getElementById(id);
//2. 获取出大盒子中的所有图片(数组)
this.ullis = this.bigBox.children[0].children;
//3. 统计图片数量(数组.length)
this.num = this.ullis.length;
//4. 获取所有的小圆点
this.ollis = this.createElement();
//5. 设置轮播的当前下标
this.indexA = 0;
//8. 获取文字信息的div
this.div = $id('msg');
this.slide();
//6. 获取左按钮
this.ltBtn = $id('ltBtn');
//7. 获取右按钮
this.rtBtn = $id('rtBtn');
this.addEvent();
//9. 计时器
this.timer = null;
this.autoPlay();
}
Slider.prototype.createElement = function(){
//1. 左按钮
var spanleft = document.createElement('span');
spanleft.id = 'ltBtn';
spanleft.innerHTML = '<';
this.bigBox.appendChild(spanleft);
//2. 右按钮
var spanright = document.createElement('span');
spanright.id = 'rtBtn';
spanright.innerHTML = '>';
this.bigBox.appendChild(spanright);
//3. ol li
var arr = []; //放置li
//创建ol
var ol = document.createElement('ol');
//创建li
for(var i = 0;i < this.num;i ++){
var li = document.createElement('li');
arr.push(li);
ol.appendChild(li);
}
this.bigBox.appendChild(ol);
//4. 信息框(div)
var div = document.createElement('div');
div.id = 'msg';
this.bigBox.appendChild(div);
return arr;
}
Slider.prototype.slide = function(){
//1》图片轮播
// 遍历所有的图片,display - none
for(var i = 0;i < this.num;i ++){
this.ullis[i].style.display = 'none';
}
// 当前图片 display-block
this.ullis[this.indexA].style.display = 'block';
//2》 小圆点
//遍历所有的小圆点,background=red
for(var i = 0;i < this.num;i ++){
this.ollis[i].style.backgroundColor = 'red';
}
//当前小圆点,background = blue
this.ollis[this.indexA].style.backgroundColor = 'blue';
//信息框 = img中的alt属性
this.div.innerHTML = this.ullis[this.indexA].firstElementChild.firstElementChild.alt;
}
Slider.prototype.addEvent = function(){
var that = this;
// 1. 左按钮 -- 点击事件-- 改变当前下标的值,调用轮播方法
this.ltBtn.onclick = function(){
that.indexA --;
if(that.indexA == -1){
that.indexA = that.num - 1;
}
that.slide();
}
//2. 右按钮 -- 点击事件--改变当前下标的值,调用轮播方法
this.rtBtn.onclick = function(){
that.indexA ++;
if(that.indexA === that.num){
that.indexA = 0;
}
that.slide();
}
//3. 遍历小圆点--移入事件--改变当前下标 的值,调用轮播方法
for(var i = 0;i < this.num;i ++){
//记录下标
this.ollis[i].index = i;
this.ollis[i].onmouseenter = function(){
that.indexA = this.index;
that.slide();
}
}
}
Slider.prototype.autoPlay = function(){
var that = this;
this.timer = setInterval(function(){
that.indexA ++;
if(that.indexA === that.num){
that.indexA = 0;
}
that.slide();
},3000)
//移入大盒子,停止自动轮播
this.bigBox.onmouseenter = function(){
clearInterval(that.timer);
}
//移出大盒子,开启自动轮播
this.bigBox.onmouseleave = function(){
that.autoPlay();
}
}
//工具箱
function $id(id){
return document.getElementById(id);
}
浙公网安备 33010602011771号