(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();
})()
08-12
682
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)