求助：将以下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); }
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄
更多精彩
