求助:将以下ES5格式代码转换为ES6格式!!!
程序员文章站
2022-06-24 14:16:00
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);
}
上一篇: 行为型模式:解释器模式
下一篇: C++ string 类详解