02网易首页轮播图笔记（李游精品前端课程）

(function(){
	leo = {
		"silder":function(){
			var timer = null;
			var allSilderButton = document.getElementsByClassName("silder-content-button")[0];
			var allSilderContent = document.getElementsByClassName("silder-content-UlNode")[0].children;
			var allLi = allSilderButton.children;
			allSilderContent[0].style.opacity = "1";
			//因为css样式已把li和active的opacity都调整为0，所以这里要打开
			for(var i = 0;i < allLi.length;i++){
				allLi[i].index = i;
				allLi[i].onmouseover = function(){
					clearInterval(timer);
					timer = setTimeout(function(){
						for(var i = 0;i < allLi.length;i++){
							allSilderContent[i].className = "";
							allSilderContent[i].style.opacity = "0";
							//每次触碰opacity都变成0，为下面的过渡效果铺垫
							if(allLi[i].className.indexOf("first")!=-1){
								allLi[i].className = "first";
							}
							else{
								allLi[i].className = ""
							}
						}
						this.className += " active"
						allSilderContent[this.index].className = "active";
						setTimeout(function(){
							allSilderContent[this.index].style.opacity = "1";
							//注意，如果元素display从none变成block,那么opacity从0->1的过渡效果就表现不出来
							//所以可以让active类的opacity属性依然是0，但要在这里加一个延时函数，延时让opacity变成1；
							//另注意：每次触碰都要让opacity变成0，然后在这里延时变成1，否则没有过渡效果。而且li里要加transition过渡时间
						}.bind(this),0)
					}.bind(this),500)
				}
				
			}
		}
	}





leo.silder();
})()