| 标题 | 固定点击变换,顺序变换,随机变换广告效果 |
| 范文 | 代码如下: <div> <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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。