js輪播圖-面向對象版

效果圖如下:

HTML部分:

<div id="main">
		<ul class="imgBox">
			<li><img src="../images/0.png"></li>
			<li><img src="../images/1.png"></li>
			<li><img src="../images/2.png"></li>
			<li><img src="../images/3.png"></li>
		</ul>
	</div>

js部分(面向對象版):

const $=(name)=>document.querySelector(name);
		class Lunbo{
			constructor(name){
				this.box=$(name);
				this.imgBox=$(".imgBox");
				this.img=this.imgBox.getElementsByTagName("img");
				this.createBtn();
				this.autoTimer=null;
				this.moveTimer=null;
				this.num=0;
				this.next();
				//使用了箭頭函數以避免定時器中的this指向問題,也可提前設置變量保存this值,否則這裏setInterval中this指向window
				this.autoTimer=setInterval(()=>{
					this.next();
				},1000);
				this.box.onmouseover=()=>{
					clearInterval(this.autoTimer);
				}
				this.imgBox.onmouseout=()=>{
					this.autoTimer=setInterval(()=>{
						this.next();
					},1000);
				}
				//同上,使用了箭頭函數以避免this指向問題
				for(let i=0;i<this.btn.length;i++){
					this.btn[i].onmouseover=()=>{
						this.num=i;
						this.animate(-this.num*this.img[0].offsetWidth);
						this.btnShow();
					}
				}
			}
			createBtn(){
				let btnBox=document.createElement("ul");
				btnBox.className="btnBox";
				for(let i=0;i<this.img.length;i++){
					let btn=document.createElement("li");
					btn.innerHTML=i+1;
					btnBox.appendChild(btn);
				}
				this.box.appendChild(btnBox);
				this.btn=btnBox.getElementsByTagName("li");
			}
			btnShow(){
				for(let i=0;i<this.img.length;i++){
					this.btn[i].className="";
				}
				this.btn[this.num].className="change";
			}
			//圖片切換時的過渡動畫
			animate(Pianyi){
				clearInterval(this.moveTimer);//這裏之所以要清除過渡動畫定時器,是防止過渡動畫還未完成便迅速切換時所引發的問題
				this.moveTimer=setInterval(()=>{
					let speed=(Pianyi-this.imgBox.offsetLeft)/6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if (this.imgBox.offsetLeft==Pianyi) {
						clearInterval(this.moveTimer);
					}else{
						this.imgBox.style.left=this.imgBox.offsetLeft+speed+"px";
					}
				},20);
			}
			//方向向右進行滾動,同時改變btn的樣式
			next(){
				this.num++;
				if (this.num==this.img.length) {
					this.num=0;
				}
				this.animate(-this.num*this.img[0].offsetWidth);
				this.btnShow();
			}
		}
		window.onload=function(){
			let test=new Lunbo("#main");
		}