查看效果：http://keleyi.com/keleyi/phtml/jqtexiao/34.htm

下面是HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jqtexiao/34/css/funnyNewsTicker.css">
<script type="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: '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="http://keleyi.com">1.下面由柯乐义同学来做报告。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">2.这些页片会自动切换。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">3.切换速度可以设置。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">4.也可以点击向上或向下箭头控制切换。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">5. 也可以点击某一页片把它切到最前端。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">6.更多信息请访问<a href="http://keleyi.com" style="color:red">http://keleyi.com</a></div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">7.下面请看歌词猜歌名（3首）。</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">8. 他说风雨中这点痛算什么</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">9.人生可比是海上的波浪</div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">10.胆似铁打骨如金钢</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">
<ul>
<li>
<div class="fnt-content" data-link="http://keleyi.com">1. 柯乐义网网址：http://keleyi.com </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">2. 网页特效库：http://keleyi.com/keleyi/phtml/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">3.柯乐义首页：<a href="http://keleyi.com">http://keleyi.com</a></div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">4.柯乐义工具： http://tool.keleyi.com/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">5. 留言板：http://h.keleyi.com/guestbook/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">6. 游戏：http://keleyi.com/game/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">7.网站地图 http://keleyi.com/map/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">8. 开源项目：http://hovertree.codeplex.com/ </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">9.MD5加密： http://tool.keleyi.com/t/md5.htm </div>
</li>
<li>
<div class="fnt-content" data-link="http://keleyi.com">10.<a href="http://keleyi.com/a/bjad/loatox9d.htm">保护眼睛的方法(电脑一族手机控参考)</a></div>
</li>
</ul>
</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("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"); return false } else if ($(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"); return false } else if ($(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"); 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(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-' + e.pagenavistyle + '.png) top no-repeat;"></div><div class="fnt-bottom-arrow" style="background:url(http://keleyi.com/keleyi/phtml/jqtexiao/34/img/fnt-arrows-' + 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></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('<li class="fnt-active"><div class="fnt-content">Error! Please try again later...</div></li>') } }) } e.modulid = "#" + $(this).attr("id"); var t = 0; var n = $(e.modulid + " ul li").length - 1; var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3]; var i = ""; var s = e.modulid; if (e.feed != false) { $(e.modulid + " ul").html(""); $(e.modulid + " ul").append('<li class="fnt-active"><div class="fnt-content">Rss Feed Loading...</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p><a href="http://keleyi.com/">首页</a> <a href="http://keleyi.com/a/bjae/kskop045.htm">原文</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a></p>
</div>
</body>
</html>

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

转载于:https://www.cnblogs.com/jihua/p/funnyNewsTicker.html

jquery叠加页片自动切换特效相关推荐

  1. jquery背景自动切换特效

    查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...

  2. 一款jquery实现的整屏切换特效

    今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: < ...

  3. html图片自动切换的幻灯片效果的,jQuery实现可自动切换的幻灯片效果插件代码...

    jQuery实现可自动切换的幻灯片效果插件代码 1. 用户快速划过按钮时不触发鼠标事件; 2. 鼠标划入当前图片按钮时不闪烁; 3. 简化并优化代码. 使用方法就不详述了, 请参见源码及相关注释 $. ...

  4. html5 背景图片自动换,网站背景图片自动切换特效css代码

    背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...

  5. html多国语言配置方法,jquery多国语言切换特效

    这是一款实现多国语言切换的jquery特效.在这个示例中,通过简单的js代码,实现包括中文和英文在内的7种不同国家语言的切换效果. 使用方法 在页面中引入jquery和style.css. HTML结 ...

  6. java照片墙_基于jQuery实现照片墙自动播放特效

    一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. 抽奖 body{ background-color ...

  7. jquery图片左右滚动切换js特效

    下载地址 jquery图片左右滚动切换特效,左右箭头控制图片滚动的网页特效代码.$(".productshow").xslider({ //.productshow是要移动对象的外 ...

  8. 分享111个JS图片切换特效，总有一款适合您

    分享111个图片切换,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下..., 111个图片切换下载链接:https://pan.baidu.com/s/1iGzOzU ...

  9. 背景色自动切换html,css3动画之背景颜色的自动切换

    因为不同浏览器内核的不同所以会产生浏览器兼容性问题 背景颜色的变换 div{ width: 200px; height: 200px; background: blue; animation:myfi ...

最新文章

  1. 东华大学java_东华大学2020秋《Java程序设计》期末大作业
  2. printf的格式控制的完整格式
  3. docker 容器 日志_如何为Docker容器设置日志轮换
  4. CentOS查看系统连接状态
  5. Zookeeper 安装部署
  6. 牛腩新闻发布系统——触发器使用
  7. [转载] [转载] numpy功能快速查找
  8. python-if判断
  9. (教程)手把手教你如何申请软件著作权
  10. 奇瑞新能源硬实力 全铝车身奇瑞大蚂蚁
  11. 视频教程-Windows Server 2016 身份管理 （MCSA 认证 70-742）-微软认证
  12. 在机器学习领域,怎样写好一篇论文
  13. Mahout实例（UserCF,ItermCF,SlopOne）
  14. ANSI/ISO C++ Professional Programmer's Handbook(7)
  15. php curl_setopt抓取内容,PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
  16. sqlserver日期推算(年,季度,月,星期推算)
  17. （二）巴菲特与索罗斯的投资习惯：七种致命的投资信念
  18. 思想——坚定不移的信仰
  19. Angular常用ng指令详解
  20. 我把问烂了的⭐MySQL⭐面试题总结了一下（带答案，万字总结，精心打磨，建议收藏）...

热门文章

  1. gitbook使用及book.json详细配置
  2. ES6——rest参数
  3. 数据库---主要约束操作讲解
  4. 前端—每天5道面试题（2）
  5. flutter text 自动换行_Flutter 即学即用——05 StatelessWidget vs StatefulWidget
  6. 有没有一百万的电脑配置？
  7. 马斯克：不要把员工变成“螺丝钉”
  8. 高中生住校好还是走读好？为什么？
  9. 闻乐天授江州司马 [唐] 元稹
  10. 如何和周围的人搞好关系？