jquery實現(xiàn)炫酷的疊加層自動切換特效
更新時間：2015年02月01日 10:04:21 投稿：hebedich
這篇文章主要給大家分享的是一則jquery實現(xiàn)炫酷的疊加層自動切換特效，效果非常棒，這里推薦給小伙伴們。
下面是HTML代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns=" <head>
<meta charset="utf-8" />
<title>jquery疊加頁片自動切換特效 - 柯樂義</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href=" <script type="text/javascript" src=">
<style>
body {
background: url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/bgnoise_lg.png);
margin: 0;
padding: 0;
font-family: 'Open Sans',Roboto,Arial,Verdana;
font-size: 15px;
font-weight: 400;
}
.container {
width: 900px;
height: auto;
margin: 0 auto;
margin-top: 20px;
text-align:center
}
.fnt-container-header h1 {
font-weight: 300;
font-size: 48px;
text-align: center;
}
.fnt-container-header h2 {
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div style="width:50%; margin:0 auto; box-sizing:border-box;">
<div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker2">
<ul>
<li>
<div class="fnt-content" data-link=".下面由柯樂義同學(xué)來做報告。</div>
</li>
<li>
<div class="fnt-content" data-link=".這些頁片會自動切換。</div>
</li>
<li>
<div class="fnt-content" data-link=".切換速度可以設(shè)置。</div>
</li>
<li>
<div class="fnt-content" data-link=".也可以點擊向上或向下箭頭控制切換。</div>
</li>
<li>
<div class="fnt-content" data-link=". 也可以點擊某一頁片把它切到最前端。</div>
</li>
<li>
<div class="fnt-content" data-link=".更多信息請訪問<a href=" </li>
<li>
<div class="fnt-content" data-link=".下面請看歌詞猜歌名（3首）。</div>
</li>
<li>
<div class="fnt-content" data-link=". 他說風(fēng)雨中這點痛算什么</div>
</li>
<li>
<div class="fnt-content" data-link=".人生可比是海上的波浪</div>
</li>
<li>
<div class="fnt-content" data-link=".膽似鐵打骨如金鋼</div>
</li>
</ul>
</div>
</div>
<br />
<br />
<div style="width:50%; margin:0 auto; box-sizing:border-box;">
<div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker3">
</div>
</div>
</div>
<script>
(function (e) { $.fn.funnyNewsTicker = function (e) { var t = { 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 }; var e = $.extend(t, e); return this.each(function () { function o() { function o() { $(e.modulid + ">div").css({ left: ($(e.modulid).width() - 30) / 2 }) } function u() { $(e.modulid + " ul li").eq(r[0]).addClass("fnt-top0"); $(e.modulid + " ul li").eq(r[1]).addClass("fnt-top1"); $(e.modulid + " ul li").eq(r[2]).addClass("fnt-top2"); $(e.modulid + " ul li").eq(r[3]).addClass("fnt-active"); $(e.modulid + " ul li").eq(r[4]).addClass("fnt-bottom2"); $(e.modulid + " ul li").eq(r[5]).addClass("fnt-bottom1"); $(e.modulid + " ul li").eq(r[6]).addClass("fnt-bottom0") } function a() { t--; if (t < 0) t = n; l() } function f() { t++; if (t == n + 1) t = 0; l() } function l() { $(e.modulid + " ul li").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 } else if (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 } else if (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 } else if (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 } else if (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 } else if (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 + " ul li").css({ height: e.itemheight, background: e.itembgcolor, border: "solid 1px " + e.bordercolor, color: e.titlecolor, "font-size": e.titlefontsize }); $(e.modulid + " ul li").each(function (t, r) { if (e.infobarvisible) { i = '<div class="fnt-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">'; if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-facebook-' + e.buttonstyle + '"></a>'; if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-twitter-' + e.buttonstyle + '"></a>'; if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".fnt-content").attr("data-link") + '" data-text="' + $(this).find(".fnt-content").text() + '" class="fnt-easing2 fnt-google-' + e.buttonstyle + '"></a>'; if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>"; if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".fnt-content").attr("data-link") + '" class="fnt-easing2 fnt-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>'; i = i + "</div>" } $(this).append(i) }); $(e.modulid + " ul li .fnt-content").find("a").css({ color: e.contentlinkcolor }); $(e.modulid + " ul li").find(".fnt-info").find("a").click(function (e) { if ($(this).attr("data-type") == "facebook") { window.open(" $(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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>
以上就是本次分享的代碼的全部了，小伙伴們拿走試試看，希望大家能夠喜歡。
相關(guān)文章
jQuery中的CSS樣式屬性css()及width()系列大全
本文給大家分享jQuery的CSS樣式屬性css(),width()系列,offset()與position()，scrollLeft()與scrollTop()的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-08-08
jQuery實現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)類似標(biāo)簽風(fēng)格的導(dǎo)航菜單效果代碼,涉及jquery鼠標(biāo)事件操作頁面元素的遍歷與樣式動態(tài)修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)左右上下移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery中slideUp()方法用法,以實例形式分析了slideUp()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
JQuery是一個很NB的js集成作品，以其簡潔的語法和跨平臺兼容性的優(yōu)勢，這里給大家介紹下JQuery中的選擇器，不理解選擇器或者用不好選擇器，是不可能有一手很NB的JQuery技能的2014-04-04
jQuery插件cxSelect多級聯(lián)動下拉菜單實例解析
這篇文章主要為大家詳細(xì)解析了jQuery插件cxSelect多級聯(lián)動下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了jQuery簡單實現(xiàn)MD5加密的方法,基于jquery.md5.js插件實現(xiàn)md5加密功能,非常簡單實用,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery實現(xiàn)摸擬alert提示框的相關(guān)資料,需要的朋友可以參考下2016-05-05
jQuery-serialize()輸出序列化form表單值的方法
jQuery-serialize()輸出序列化表單值在工作中很常見也很實用，于是本人搜集整理了一些，需要了解的朋友可以詳細(xì)參考下2012-12-12