html渐隐加减分,关于Html轮播效果实现，带透明度渐隐

3

接下来键入jquery代码：复制即可 切记放在

标签内部

var hoverLI,index1,arr,setAutoplayInterval,clickLI,opacitySetinterval,lastLI,StartTime,lastTime,autoPlayStyle;

clickLI=0;

arr=["0","1","2","3","4","5"];

StartTime=[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];

lastTime=[1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1];

min=9;

max=0;

$(function(){

autoPlay();

Hover();

autoPlayClick();

autoPlayStyle_Start();

})

function Hover(){

hoverLI=0;

$("#headPlay_UL>li").hover(function(){

clearInterval(setAutoplayInterval);

hoverLI=$(this).index();

$("#headPlay_UL li:eq("+hoverLI+")").css("color","red");

},function(){

if(lastLI!=hoverLI){

$("#headPlay_UL li:eq("+(hoverLI)+")").css("color","white");

}

});

$("#headPlay").hover(function(){

clearInterval(setAutoplayInterval);

clearInterval(autoPlayStyle);

},function(){

autoPlay();

autoPlayStyle_Start()

});

}

function autoPlayClick(){

$("#headPlay_UL li:eq("+clickLI+")").css("color","red");

lastLI=clickLI;

$("#headPlay_UL>li").click(function(){

$("#headPlay_UL li:eq("+(lastLI)+")").css("color","white");

clickLI=$(this).index();

$("#headPlay_UL li:eq("+clickLI+")").css("color","red");

lastLI=clickLI;

$("#autoplay").css("background","url(img/"+arr[clickLI]+".jpg)no-repeat");

$("#autoplay").css("background-size","cover");

});

}

function autoPlay(){

setAutoplayInterval=setInterval(function(){

clickLI=clickLI>=arr.length-1?0:clickLI+1;

$("#headPlay_UL>li").get(clickLI).click();

clearInterval(autoPlayStyle);

autoPlayStyle_Start();

},4000);

}

function autoPlayStyle_Start(){

autoPlayStyle=setInterval(function(){

opacitySetinterval=setInterval(function(){

if(max<=lastTime.length){

$("#headPlay").css("opacity",lastTime[lastTime.length-min]);

min--;

max++;

}

if(max>=StartTime.length){

$("#headPlay").css("opacity",StartTime[min++]);

if(min==lastTime.length){

max=0;

}

}

},100);

setTimeout(function(){

clearInterval(opacitySetinterval);

},2000);

},3000);

}