jquery实现炫酷的叠加层自动切换特效
下面是HTML代码：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title>jquery叠加页片自动切换特效-柯乐义</title><basetarget="_blank"/>
<linkrel="stylesheet"type="text/css"href="http://keleyi.com/keleyi/phtml/jqtexiao/34/css/funnyNewsTicker.css">
<scripttype="text/javascript"src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
<style>
body{
background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/bgnoise_lg.png);
margin:0;
padding:0;
font-family:'OpenSans',Roboto,Arial,Verdana;
font-size:15px;
font-weight:400;
}
.container{
width:900px;
height:auto;
margin:0auto;
margin-top:20px;
text-align:center
}
.fnt-container-headerh1{
font-weight:300;
font-size:48px;
text-align:center;
}
.fnt-container-headerh2{
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<divclass="container">
<divstyle="width:50%;margin:0auto;box-sizing:border-box;">
<divclass="funnyNewsTickerfnt-radiusfnt-shadowfnt-easing"id="funnyNewsTicker2">
<ul>
<li>
<divclass="fnt-content"data-link="http://domain.com">1.下面由柯乐义同学来做报告。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">2.这些页片会自动切换。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">3.切换速度可以设置。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">4.也可以点击向上或向下箭头控制切换。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">5.也可以点击某一页片把它切到最前端。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">6.更多信息请访问<ahref="http://domain.com"style="color:red">http://domain.com</a></div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">7.下面请看歌词猜歌名（3首）。</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">8.他说风雨中这点痛算什么</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">9.人生可比是海上的波浪</div>
</li>
<li>
<divclass="fnt-content"data-link="http://domain.com">10.胆似铁打骨如金钢</div>
</li>
</ul>
</div>
</div>
<br/>
<br/>
<divstyle="width:50%;margin:0auto;box-sizing:border-box;">
<divclass="funnyNewsTickerfnt-radiusfnt-shadowfnt-easing"id="funnyNewsTicker3">
</div>
</div>
</div>
<script>
(function(e){$.fn.funnyNewsTicker=function(e){vart={width:"100%",modulid:"funnyNewsTicker",autoplay:true,timer:3e3,titlecolor:"#333",titlefontsize:"16px",itembgcolor:"#FFF",contentlinkcolor:"#099",infobgcolor:"#f2f2f2",bordercolor:"#DDD",itemheight:130,infobarvisible:false,btnfacebook:true,btntwitter:true,btngoogleplus:true,btnlinkbutton:true,btnlinktarget:"_blank",pagecountvisible:true,buttonstyle:"black",pagenavi:true,pagenavistyle:"black",feed:false,feedcount:100};vare=$.extend(t,e);returnthis.each(function(){functiono(){functiono(){$(e.modulid+">div").css({left:($(e.modulid).width()-30)/2})}functionu(){$(e.modulid+"ulli").eq(r[0]).addClass("fnt-top0");$(e.modulid+"ulli").eq(r[1]).addClass("fnt-top1");$(e.modulid+"ulli").eq(r[2]).addClass("fnt-top2");$(e.modulid+"ulli").eq(r[3]).addClass("fnt-active");$(e.modulid+"ulli").eq(r[4]).addClass("fnt-bottom2");$(e.modulid+"ulli").eq(r[5]).addClass("fnt-bottom1");$(e.modulid+"ulli").eq(r[6]).addClass("fnt-bottom0")}functiona(){t--;if(t<0)t=n;l()}functionf(){t++;if(t==n+1)t=0;l()}functionl(){$(e.modulid+"ulli").attr("class","");if(t==0){r[0]=n-2;r[1]=n-1;r[2]=n;r[3]=t;r[4]=t+1;r[5]=t+2;r[6]=t+3}elseif(t==1){r[0]=n-1;r[1]=n;r[2]=t-1;r[3]=t;r[4]=t+1;r[5]=t+2;r[6]=t+3}elseif(t==2){r[0]=n;r[1]=t-2;r[2]=t-1;r[3]=t;r[4]=t+1;r[5]=t+2;r[6]=t+3}elseif(t==n){r[0]=n-3;r[1]=n-2;r[2]=n-1;r[3]=t;r[4]=0;r[5]=1;r[6]=2}elseif(t==n-1){r[0]=n-4;r[1]=n-3;r[2]=n-2;r[3]=t;r[4]=t+1;r[5]=0;r[6]=1}elseif(t==n-2){r[0]=n-5;r[1]=n-4;r[2]=n-3;r[3]=t;r[4]=t+1;r[5]=t+2;r[6]=0}else{r[0]=t-3;r[1]=t-2;r[2]=t-1;r[3]=t;r[4]=t+1;r[5]=t+2;r[6]=t+3}u()}$(e.modulid+"ulli").css({height:e.itemheight,background:e.itembgcolor,border:"solid1px"+e.bordercolor,color:e.titlecolor,"font-size":e.titlefontsize});$(e.modulid+"ulli").each(function(t,r){if(e.infobarvisible){i='<divclass="fnt-info"style="background:'+e.infobgcolor+";border-color:"+e.bordercolor+';">';if(e.btnfacebook)i=i+'<adata-type="facebook"data-url="'+$(this).find(".fnt-content").attr("data-link")+'"data-text="'+$(this).find(".fnt-content").text()+'"class="fnt-easing2fnt-facebook-'+e.buttonstyle+'"></a>';if(e.btntwitter)i=i+'<adata-type="twitter"data-url="'+$(this).find(".fnt-content").attr("data-link")+'"data-text="'+$(this).find(".fnt-content").text()+'"class="fnt-easing2fnt-twitter-'+e.buttonstyle+'"></a>';if(e.btngoogleplus)i=i+'<adata-type="google"data-url="'+$(this).find(".fnt-content").attr("data-link")+'"data-text="'+$(this).find(".fnt-content").text()+'"class="fnt-easing2fnt-google-'+e.buttonstyle+'"></a>';if(e.pagecountvisible)i=i+"<span>"+($(this).index()+1)+"/"+(n+1)+"</span>";if(e.btnlinkbutton)i=i+'<ahref="'+$(this).find(".fnt-content").attr("data-link")+'"class="fnt-easing2fnt-link-'+e.buttonstyle+'"target="'+e.btnlinktarget+'"></a>';i=i+"</div>"}$(this).append(i)});$(e.modulid+"ulli.fnt-content").find("a").css({color:e.contentlinkcolor});$(e.modulid+"ulli").find(".fnt-info").find("a").click(function(e){if($(this).attr("data-type")=="facebook"){window.open("http://www.facebook.com/sharer.php?u="+encodeURIComponent($(this).attr("data-url"))+"&t="+encodeURIComponent($(this).attr("data-text")),"sharer","toolbar=0,status=0,width=626,height=436");returnfalse}elseif($(this).attr("data-type")=="twitter"){window.open("http://twitter.com/share?text="+$(this).attr("data-text")+"&url="+$(this).attr("data-url"),"sharer","toolbar=0,status=0,width=626,height=436");returnfalse}elseif($(this).attr("data-type")=="google"){window.open("https://plus.google.com/share?url="+$(this).attr("data-url")+"&title="+$(this).attr("data-text"),"sharer","height=550,width=525,left=100,top=100,menubar=0");returnfalse}});$(e.modulid+"ulli").click(function(e){t=$(this).index();l()});if(e.pagenavi){$(e.modulid).append('<divclass="fnt-top-arrow"style="background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'+e.pagenavistyle+'.png)topno-repeat;"></div><divclass="fnt-bottom-arrow"style="background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'+e.pagenavistyle+'.png)bottomno-repeat;"></div>');$(e.modulid).css({height:e.itemheight+200,padding:"20px10px",width:e.width})}else{$(e.modulid).css({height:e.itemheight+160,padding:"0px10px",width:e.width})}o();$(window).resize(function(e){o()});u();$(e.modulid+">div").click(function(e){if($(this).attr("class")=="fnt-top-arrow")a();elsef()});if(e.autoplay){s=setInterval(function(){f()},e.timer);$(e.modulid).hover(function(){clearInterval(s)},function(){s=setInterval(function(){f()},e.timer)})}}functionu(){$.ajax({type:"GET",url:document.location.protocol+"//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num="+e.feedcount+"&callback=?&q="+encodeURIComponent(e.feed),dataType:"json",async:false,success:function(i){veri=i.responseData.feed.entries;news="";$(veri).each(function(e,t){if(e==0)news=news+'<liclass="fnt-active"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==1)news=news+'<liclass="fnt-bottom2"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==2)news=news+'<liclass="fnt-bottom1"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==3)news=news+'<liclass="fnt-bottom0"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==veri.length-1)news=news+'<liclass="fnt-top2"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==veri.length-2)news=news+'<liclass="fnt-top1"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elseif(e==veri.length-3)news=news+'<liclass="fnt-top0"><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>";elsenews=news+'<li><divclass="fnt-content"data-link="'+veri[e].link+'"><ahref="'+veri[e].link+'">'+veri[e].title+"</a></div></li>"});$(e.modulid+"ul").html("");$(e.modulid+"ul").append(news);n=veri.length-1;r=[n-2,n-1,n,t,t+1,t+2,t+3];o()},error:function(){$(e.modulid+"ul").html('<liclass="fnt-active"><divclass="fnt-content">Error!Pleasetryagainlater...</div></li>')}})}e.modulid="#"+$(this).attr("id");vart=0;varn=$(e.modulid+"ulli").length-1;varr=[n-2,n-1,n,t,t+1,t+2,t+3];vari="";vars=e.modulid;if(e.feed!=false){$(e.modulid+"ul").html("");$(e.modulid+"ul").append('<liclass="fnt-active"><divclass="fnt-content">RssFeedLoading...</div></li>');u()}else{o()}})}})(jQuery)
$(document).ready(function(){
$("#funnyNewsTicker2").funnyNewsTicker({width:"80%",timer:4000,titlecolor:"#FFF",itembgcolor:"#1faf6d",infobgcolor:"#1a935c",buttonstyle:"white",bordercolor:"#1a935c"});
$("#funnyNewsTicker3").funnyNewsTicker({width:"60%",itemheight:250,infobarvisible:false,pagenavi:false,timer:500,itembgcolor:"#af1f63",bordercolor:"#af1f63",titlecolor:"#FFF"});
});
</script>
<divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
以上就是本次分享的代码的全部了，小伙伴们拿走试试看，希望大家能够喜欢。