固定点击变换,顺序变换,随机变换广告效果
这个特效源自中国站长网，本站通过精简和修改，使其多了点选择，少了点代码。供大家参考使用。特效主要用于首页显示广告等
查看特效：固定点击变换,顺序变换,随机变换广告效果
代码如下:
<div align="center">
<DIV id=nav>
<UL>
<LI><IMG src="images/02.jpg" text="美景如画的海景|天蓝海蓝|2"></LI>
<LI><IMG src="images/01.jpg" text="Handy Code|春华秋实|1"></LI>
<LI><IMG src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命|3"></LI>
<LI><IMG src="images/04.jpg" text="孤独的一棵老树|等谁呢?|4"></LI>
<LI><IMG src="images/05.jpg" text="明媚的向日葵花|生生不息的生命|5"></LI>
</UL>
<DIV id=frontTextBack></DIV>
<DIV id=frontText></DIV>
<DIV id=frontTextSub></DIV>
<DIV id=BG></DIV>
<DIV id=mask></DIV>
<DIV id=back><IMG height=240 src="" width=760></DIV>
</DIV>
</div>
<SCRIPT type=text/javascript>
<!--
var num = 0;
var i=0;//默认开始播放第几个，最大4 ，因为有5各个最大是4
var type=2;//样式分三种样式 0为不播放，仅通过点击播放，1为顺序播放 2为随机播放
var obj_Inter;
$("#nav").hide();
$("#nav>UL>li img").load(function(){num++;if(num==5)$("#nav").show();}).each(function(index){$(this).click(function(){
clearInterval(obj_Inter);
show(index);
if(type!=0){obj_Inter = setInterval(show_action,3000);i=index+1;}
});});
function show(index){
var obj = $("#nav>ul>li img:eq("+index+")");
if ($(obj).attr("open")==1) return;
$("#frontText,#frontTextBack,#frontTextSub").fadeOut();
$("#nav>UL >li img.active").fadeTo(200,0.6)
.removeClass("active")
.attr("open","0")
.animate({top:5,width:52,left:10},300)
.parent().css({"color":"#aaa"}); //将显示的内容退去完毕
var t = $(obj).attr("text").split("|");
$(obj).animate({top:-5,width:70,height:40,left:1},100)
.addClass("active")
.attr("open","1")
.fadeTo(200,1)
.parent().css({"color":"white"});
$("#back").children().addClass("gray").end().fadeTo(500,0.1,function(){
$(this).children("img").attr("src","images/"+t[2]+".jpg").removeClass("gray"); //更改图片
$(this).fadeTo(500,1,function(){
$("#frontText,#frontTextBack").html(t[0]).fadeIn(200); //更改正文文字
$("#frontTextSub").html(t[1]).fadeIn(200);
});
})
}
function show_action(){
switch(type){
case 0:i=0;show(i);break;
case 1:if(i>=$("#nav>ul>li img").size())i=0;show(i);i++; break;
case 2:do{var temp = Math.round(Math.random()*4);}while(i==temp);show(temp);$("#num").html(temp);break;
}
}
function begin(){
switch(type){
case 0:i=0;show_action();break;
default:show_action();obj_Inter =setInterval(show_action,3000);
}
}
begin();
//-->
</SCRIPT>
网站制作学习网修改，转载请注明