卓思网 - Joomla Choice

  • 增加字体大小
  • 默认字体大小
  • 减少字体大小
正在加载网页......请稍候
主页 最新新闻 新闻列表 jQuery循环滚动展示代码


jQuery循环滚动展示代码

E-mail 打印 PDF
全站图片暂时不能显示的解决办法
(1 位用户参与评分, 当前平均得到 3.00 颗星星)
正在载入......请稍候
循环滚动展示的文字和图片每个人都见过,实现类似效果的 JS 也很多。但如果只用于几个条目或三五张图片,体积庞大的 JS 会浪费资源。看见 Jinwen 同学用 Adam Cai 的代码,感觉稍显复杂而且不够 jQuery。我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单。 先看演示。 使用之前,先插入 jQuery 框架( 直接从 Google 拿 ): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> JS 代码( 以 <script type="text/javascript"></script> 包裹,或者保存成单独文件引用。): $(document).ready(function(){ $("#sItem li:not(:first)").css("display","none"); var B=$("#sItem li:last"); var C=$("#sItem li:first"); clearInterval(A); var A=setInterval(function(){ if(B.is(":visible")){ C.fadeIn(500).addClass("in");B.hide() }else{ $("#sItem li:visible").addClass("in"); $("#sItem li.in").next().fadeIn(500); $("li.in").hide().removeClass("in")} },3000) //每3秒钟切换一条,你可以根据需要更改 }) HTML 部分: <ul> <li>文字或图片</li> <li>文字或图片</li> <li>文字或图片</li> </ul> 条目不限,内容不限,将需要循环滚动展示的条目放置于 <ul> 中就可以了。

本文章使用VNM RSS导入功能,阁下可以点击这里访问原作者文章链接

  全站会员动态互动竞技Q版对抗游戏“弹弹堂”来了!

免费新闻订阅

Translate/翻譯/翻訳する

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
prev
next
News image
News image
News image
News image
News image
News image
粤ICP备09101415号