ES6焦点图(已实现)

html：
<div id=focus>
	ul>li*n
</div>

ECMScript 6  构造器：当然你可以预先编译在浏览器环境运行
class Focus{
	constructor(obj,time){
		const li = document.querySelectorAll("#focus ul li");
		this.len = li.length;
        {
            let btn = "<div class='btn'>";
            let btn_r = "</div>";
            let button = ()=>{
                for(let i=0;i<this.len;i++){
                    btn+='<span></span>'
                }
                return btn+btn_r
            }
            obj.innerHTML+=button(this.len,btn)//创建按钮
        }
        this.focusTime = time;
        this.index = 0;
        this.aotuPLay(obj,this.index);
		let span = document.querySelectorAll(".btn span")
		for(let i=0;i<span.length;i++){
            span[i].addEventListener("mouseover",()=>{
                this.showPic(i,obj);
                clearInterval(this.timer);//清除定时器
                this.timer = null;//销毁内存
            })
            span[i].addEventListener("mouseleave",()=>this.aotuPLay(obj))
        }
	}
	showPic(i,obj){
        let nowLeft = -i * obj.clientWidth+'px'; //根据index值计算ul元素的left值'
        obj.getElementsByTagName("ul")[0].style.marginLeft = nowLeft;
        this.index=i;
    }
    aotuPLay(obj){
        this.timer = setInterval(
            ()=>{
                this.showPic(this.index,obj);
                ++this.index;
                this.index>=this.len?this.index=0:this.index;
            },this.focusTime
        )
    }
}
window.onload = function(){
 const focus = new Focus(document.querySelector("#focus"),4000); //容器 ,轮播时间
}
//至此焦点图得到实现