面向对象重构轮播图 --- 菜鸟分享
发布于 7 年前 作者 chenzhidongweb 3031 次浏览 来自 分享

function Slider(containerId){ this.containerId = $(containerId); this.ullis =$get($get(containerId,“ul”)[0],“li”); // console.log(this.ullis); this.num = this.ullis.length; this.ollis =this.createList(); // console.log(this.ollis); this.indexA = 1; this.timer; this.init(this.indexA); this.ltBtn = $(“ltBtn”); this.rtBtn = $(“rtBtn”); this.mouseenter(); this.autoplay(this.indexA); // console.info(this.ollis); } Slider.prototype.createList =function(){//创建ol var ol = $create(“ol”); // console.log(this.num); var lis = []; for(var i = 0; i<this.num;i++){ var li = $create(“li”); ol.appendChild(li); lis.push(li);
} this.containerId.appendChild(ol); var spanleft = $create(“span”) spanleft.innerHTML="<" spanleft.id=“ltBtn”; this.containerId.appendChild(spanleft); var spanright =$create(“span”); spanright.innerHTML = ">" spanright.id = “rtBtn”; this.containerId.appendChild(spanright); var div = $create(“div”) div.id= “msg”; this.containerId.appendChild(div); return lis; } Slider.prototype.init =function(index){ this.moveto(index); } Slider.prototype.mouseenter =function(){ var that = this; for (var i = 0; i < this.num; i++) { this.ollis[i].index = i; this.ollis[i].onmouseenter = function(){ that.moveto(this.index); } } this.ltBtn.onclick = function(){ // console.log(that.indexA); if(that.indexA>0){ that.indexA–; that.moveto(that.indexA); }else{ that.indexA=that.num-1; that.moveto(that.indexA); } } this.rtBtn.onclick = function(){ if(that.indexA<that.num-1){ that.indexA++; that.moveto(that.indexA); }else{ that.indexA = 0; that.moveto(that.indexA); } } } Slider.prototype.moveto =function(index){ // 初始化 for (var i = 0; i < this.num; i++) { this.ullis[i].style.display=“none”; this.ollis[i].style.backgroundColor=“red”;
} this.ullis[index].style.display=“block”; this.ollis[index].style.backgroundColor=“blue”; // $(“msg”).innerHTML = this.ullis[index].firstChild.firstChild.alt; } Slider.prototype.autoplay= function(indexA){ var that =this;

that.timer = setInterval(function(){
        indexA%=that.num;
        that.moveto(indexA);    
        indexA++;
    },3000);
that.containerId.onmouseenter =function(){
    clearInterval(that.timer);
    console.info(that.containerId);
}
that.containerId.onmouseleave = function(){
    that.autoplay(indexA)
}    

}

// 直接贴js部分了

回到顶部