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