求助:将以下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);
}

posted on 2019-04-15 20:21  止戈武  阅读(476)  评论(0)    收藏  举报

导航