javascript实现自动切换与点击切换的例子

words" content="" />

   

flashBanner">
       

           

               

               

               

               

           

       

       

           
           
           
           
       

   

 
.flashBanner{width: 100%;height:600px;position: relative;background-size:100% 100%;}
.flashBanner ul li{height: 600px;position: absolute;width: 100%}
.mask{position: absolute;bottom: 0;width:100%;height: 64px;line-height:64px;background-color:#000;opacity:0.7;text-align: right; }
.mask img{width:60px;height: 36px;margin-right: 10px;margin-top: 15px;}

$(function(){
$(".flashBanner .flashb").each(function(){
var j=1;
var timer = setInterval(function(){
var show = $(".flashBanner ul li").index($("#td"+j));
if (show >= $(".flashBanner ul li").length-1){
show = 0;
j=1;
}else{
show ++;
j++;
}
changeImg(show);
},5000);
 
function changeImg(index){
$(".flashBanner ul li").animate({opacity:0},1000);
$(".flashBanner ul li").eq(index).animate({opacity:1},2000);
$(".flashBanner .mask img").animate({opacity:0.4},2000);
$(".flashBanner .mask img").eq(index).animate({opacity:1},2000);
    //$(".flashBanner #td"+innet).animate({opacity:1},1000);
}
 
$(".flashBanner .mask img").click(function(){
var idd = $(this).attr("idd");
j=idd;
$(".flashBanner .mask img").animate({opacity:0.4},2000);
$(this).animate({opacity:1},2000);
$(".flashBanner ul li").animate({opacity:0},1000);
$(".flashBanner #td"+idd).animate({opacity:1},1000);
clearInterval(timer);
 
timer = setInterval(function(){
var show = $(".flashBanner ul li").index($("#td"+j));
if (show >= $(".flashBanner ul li").length-1){
show = 0;
j=1;
}else{
show ++;
j++;
}
changeImg(show);
},5000);
});
});
});