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);
}