jsES6實作輪播

class Slider{

constructor(id){

//執行個體屬性

//輪播的大盒子

this.bigBox = $id(id);

//擷取所有的ul中的li

this.ullis = this.bigBox.children[0].children;

//擷取大圖數量

this.num = this.ullis.length;

//建立并擷取所有的ol中的li

this.ollis = this.createEle();

//設定目前輪播圖檔的下标

this.indexA = 0;

//擷取文字資訊的div

this.div = $id(‘msg’);

//調用輪播方法

this.slide();

//擷取左按鈕

this.ltBtn = $id(‘ltBtn’);

//擷取右按鈕

this.rtBtn = $id(‘rtBtn’);

//調用添加事件的方法

this.addEvent();

//計時器

this.timer = null;

//調用自動輪播

this.autoPlay();

}

//原型方法

//建立頁面元素

createEle(){

// 左按鈕 span

let leftSpan = $create(‘span’);

leftSpan.innerHTML = ‘<’;

leftSpan.id = ‘ltBtn’;

this.bigBox.appendChild(leftSpan);

// 右按鈕 span

let rightSpan = $create(‘span’);

rightSpan.innerHTML = ‘>’;

rightSpan.id = ‘rtBtn’;

this.bigBox.appendChild(rightSpan);

// 放文字的div

let div = $create(‘div’);

div.id = ‘msg’;

this.bigBox.appendChild(div);

// ol

let arr = [];

let ol = $create(‘ol’);

// li

for(let i = 0;i < this.num;i ++){

let li = $create(‘li’);

ol.appendChild(li);

arr.push(li);

}

this.bigBox.appendChild(ol);

return arr;

}

//設定輪播

slide(){

//圖檔

for(let i = 0;i < this.num;i ++){

this.ullis[i].style.display = ‘none’;

}

this.ullis[this.indexA].style.display = ‘block’;

//圓點

for(let i = 0;i < this.num;i ++){

this.ollis[i].style.backgroundColor = ‘red’;

}

this.ollis[this.indexA].style.backgroundColor = ‘blue’;

//文字

this.div.innerHTML = this.ullis[this.indexA].firstElementChild.firstElementChild.alt;

}

//添加事件

addEvent(){

//左 點
	this.ltBtn.onclick = ()=>{
		this.indexA --;
		if(this.indexA === -1){
			this.indexA = this.num - 1;
		}
		//調用輪播
		this.slide();
	}
	//右  點
	this.rtBtn.onclick = ()=>{
		this.indexA ++;
		if(this.indexA === this.num){
			this.indexA = 0;
		}
		this.slide();
	}
	//小圓點  移入
	for(let i = 0;i < this.num;i ++){
		
		this.ollis[i].onmouseenter = ()=>{
			this.indexA = i;
			this.slide();
		}
	}
}
//自動輪播
autoPlay(){

	this.timer = setInterval(()=>{
		this.indexA ++;
		if(this.indexA === this.num){
			this.indexA = 0;
		}
		this.slide();
	},3000)
	//給大盒子添加移入事件
	this.bigBox.onmouseenter = ()=>{
		clearInterval(this.timer);
	}
	//給大盒子添加移出事件
	this.bigBox.onmouseleave = ()=>{
		this.autoPlay();
	}
}
           

}

//工具箱

function $id(id){

return document.getElementById(id);

}

function $create(tagName){

return document.createElement(tagName);

}