下面是HTML程式碼： 複製程式碼 程式碼如下: http://www.w3.org/1999/xhtml"> jquery叠加页片自动切换特效 - 柯乐义 http://keleyi.com/keleyi/phtml/jqtexiao/34/css/funnyNewsTicker.css"> </script">http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script</a>><br> <style><br> body {<br> background: url(<a href="http://keleyi.com/keleyi/phtml/jqtexiao/34/img/bgnoise_lg.png">http://keleyi.com/keleyi/phtml/jqtexiao/34/img/bgnoise_lg.png</a>);<br> margin: 0;<br> padding: 0;<br> font-family: 'Open Sans',Roboto,Arial,Verdana;<br> font-size: 15px;<br> font-weight: 400;<br> }<br> .container {<br> width: 900px;<br> height: auto;<br> margin: 0 auto;<br> margin-top: 20px;<br> text-align:center<br> }<br> .fnt-container-header h1 {<br> font-weight: 300;<br> font-size: 48px;<br> text-align: center;<br> }<br> .fnt-container-header h2 {<br> font-size: 30px;<br> text-align: center;<br> }<br> </style><br> </head><br> <body><br> <div class="container"><br> <div style="width:50%; margin:0 auto; box-sizing:border-box;"><br> <div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker2"><br> <ul><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">1">http://domain.com">1.下面由柯乐义同学来做报告。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">2">http://domain.com">2.这些页片会自动切换。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">3">http://domain.com">3.切换速度可以设置。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">4">http://domain.com">4.也可以点击向上或向下箭头控制切换。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">5">http://domain.com">5. 也可以点击某一页片把它切到最前端。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">6">http://domain.com">6.更多信息请访问<a href="<a href="http://domain.com">http://domain.com</a>" style="color:red">http://domain.com</a></div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">7">http://domain.com">7.下面请看歌词猜歌名（3首）。</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">8">http://domain.com">8. 他说风雨中这点痛算什么</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">9">http://domain.com">9.人生可比是海上的波浪</div><br> </li><br> <li><br> <div class="fnt-content" data-link="<a href="http://domain.com">10">http://domain.com">10.胆似铁打骨如金钢</div><br> </li><br> </ul><br> </div><br> </div><br> <br /><br> <br /><br> <div style="width:50%; margin:0 auto; box-sizing:border-box;"><br> <div class="funnyNewsTicker fnt-radius fnt-shadow fnt-easing" id="funnyNewsTicker3"><br> </div><br> </div><br> </div> <br> <script><br> (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("<a href="http://www.facebook.com/sharer.php?u">http://www.facebook.com/sharer.php?u</a>=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436"); return false } else if ($(this).attr("data-type") == "twitter") { window.open("<a href="http://twitter.com/share?text">http://twitter.com/share?text</a>=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436"); return false } else if ($(this).attr("data-type") == "google") { window.open("<a href="https://plus.google.com/share?url">https://plus.google.com/share?url</a>=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0"); return false } }); $(e.modulid + " ul li").click(function (e) { t = $(this).index(); l() }); if (e.pagenavi) { $(e.modulid).append('<div class="fnt-top-arrow" style="background:url(<a href="http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'">http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'</a> + e.pagenavistyle + '.png) top no-repeat;"></div><div class="fnt-bottom-arrow" style="background:url(<a href="http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'">http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-'</a> + e.pagenavistyle + '.png) bottom no-repeat;"></div>'); $(e.modulid).css({ height: e.itemheight + 200, padding: "20px 10px", width: e.width }) } else { $(e.modulid).css({ height: e.itemheight + 160, padding: "0px 10px", width: e.width }) } o(); $(window).resize(function (e) { o() }); u(); $(e.modulid + ">div").click(function (e) { if ($(this).attr("class") == "fnt-top-arrow") a(); else f() }); if (e.autoplay) { s = setInterval(function () { f() }, e.timer); $(e.modulid).hover(function () { clearInterval(s) }, function () { s = setInterval(function () { f() }, e.timer) }) } } function u() { $.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 + '<li class="fnt-active"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 1) news = news + '<li class="fnt-bottom2"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 2) news = news + '<li class="fnt-bottom1"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 3) news = news + '<li class="fnt-bottom0"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 1) news = news + '<li class="fnt-top2"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 2) news = news + '<li class="fnt-top1"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 3) news = news + '<li class="fnt-top0"><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else news = news + '<li><div class="fnt-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div>" }); $(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() }, 錯誤: function () { $(e.modulid " ul").html('<div class="fnt-content">錯誤！ (this).attr("id"); var n = $(e.modulid " ul li").length - 1; , n, t, t 1, t 2, t 3]; if (e.feed ! = false) { $(e.modulid " ul").html( ""); $(e.modulid " ul").append('<li class="fnt-active">Rss Feed 正在載入... div></li>'); u() } else { o() } }) } })(jQuery)<br> $(文檔).ready(function(){<br> $("#funnyNewsTicker2").funnyNewsTicker({width:"80%",timer:4000,titlecolor:"#FFF",itemgcolor:"#1faf6d",infobgcolor:"#1a935c",buttonstyle:"白色",bcolorcolor:"白色",bcolor :"#1a935c"}); <br> $("#funnyNewsTicker3").funnyNewsTicker({width:"60%",itemheight:250,infobarvisible:false,pagenavi:false,timer:500,itemgcolor:"#af1f63",bordercolor:"#af1f63",titlemgcolor:"#af1f63",bordercolor:"#af1f63",titlecocolor: “#FFF”}); <br> });<br> >腳本<br> <div style="text-align:center;margin:50px 0; font:normal 14px/24px '微軟雅黑';"> <br> <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗。 </p> </div> <br> 身體><br> </div> </div>
