欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

求助:将以下ES5格式代码转换为ES6格式!!!

程序员文章站 2022-04-09 17:09:37
function Slider(id){ //属性 // 1. 通过id获取元素对象(大盒子) this.bigBox = document.getElementById(id); //2. 获取出大盒子中的所有图片(数组) this.ullis = this.bigBox.children[0]. ......
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);
}

上一篇: HTML列表

下一篇: js动态生成水印