You are here: Home » All Categories » » jQuery简单实现信息轮换显示效果（渐显渐隐）

jQuery简单实现信息轮换显示效果（渐显渐隐）

Sep 12th, 2010 10:18 | ⊕ Leave a comment?(188) ⊕ Go to comments

这个是我前几天折腾的一段 jQuery 代码，用来轮换显示侧边栏唠叨栏的信息，并加入渐显渐隐效果。

一开始在网上搜，但搜到的都是需要使用一个高人写的轮换显示函数，我觉得为了这么个小功能去加载这么一大串js代码不值，于是自己试着折腾，没想到竟然折腾成功，虽然方法比较原始，但能用就好。

我没学过 js，对于 jQuery 也是一知半解，很多效果都是不断折腾测试出来的，所以高手请忽视代码的标准性，如果有什么更好的代码请指教。

下面是实现方法和代码：

0. 前提，当然是先加载 jQuery 库了，我用的是 1.3.2 版本，怎么加载 jQuery 这里不贴了，自个放狗搜或者我博客搜。

1. 显示信息的 html 结构，每条消息用 <span></span>，参考如下（具体要多少条消息原理上是没有限制的）

<div class="laodao">
	<strong>&raquo;</strong><!-- style="display:none;"可以在style.css自定义 -->
	<span style="display:none;">最新折腾：Ajax评论翻页，荒淫测试... </span>
	<span style="display:none;">广告: 主题定制/修改可以找我。</span>
	<span style="display:none;">其他……</span>
</div>

2. jQuery 代码，具体看注释

jQuery(document).ready(function(){
	laodao(); // 先执行一次函数 laodao()
	setInterval('laodao()', 6100); // 然后每隔 6100 毫秒执行一下函数 laodao()
});
var laodao_i = 0, //span排序序号
	landao_span_arr = 0;
	laodao_span_num = 0; // 统计span数量并减 1 处理
function laodao() {
	if(landao_span_arr==0){
	landao_span_arr = $(".laodao").children("span");
	laodao_span_num = landao_span_arr.length - 1; // 统计span数量并减 1 处理
	}
	if (laodao_i > laodao_span_num) {laodao_i = 0;} // 如果计数器（span排序）大于 laodao_span_num 时归零
	$('.laodao span:eq('+laodao_i+')').fadeIn(1500); //渐显效果显示第 laodao_i 个span
	setTimeout(function() {$('.laodao span:eq('+laodao_i+')').fadeOut(1500);laodao_i++;},4500);
};

OK，就这样了，有点忙，不罗嗦了。

另外，昨天给主题加了 ajax 评论翻页功能，荒淫测试。

声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25302

Filed under

| Tags:

, ,

Related Posts

Most Popular

188 Comments.

⊕Leave a comment?
  1. 蜂胶的作用与功效 蜂胶的作用与功效 2010-09-15 10:47 # 360Safe ExplorerWindows XP

    头晕中，
    对代码，天生过敏

    Reply | Quote
    61楼
  2. zen cart zen cart 2010-09-15 12:05 # Firefox 3.6.9Windows XP

    等我有这么多评论的时候，我再来要翻页AJAX，哈哈！

    Reply | Quote
    62楼
  3. Lazyyyyyy Lazyyyyyy 2010-09-15 23:35 # Maxthon 2.0Windows XP

    对代码，天生过敏

    我喜欢这句~

    Reply | Quote
    63楼
  4. 末路花未央 末路花未央 2010-09-16 15:15 # Google Chrome 6.0.472.55Windows Vista

    一直想用这个东西，一直没效果，试试你的方法~ :smile:

    Reply | Quote
    64楼
  5. 疾风 疾风 2010-09-16 15:30 # Firefox 3.6.9Windows 7

    唠叨的»箭头也应该渐显渐隐 不然感觉怪怪的呢 呵呵呵

    Reply | Quote
    65楼
  6. ZDAvril ZDAvril 2010-09-16 17:05 # ChromePlus 1.4.1.0Windows 7

    :mrgreen: 又来学习了~找点好玩的代码~

    Reply | Quote
    66楼
  7. Timothy Timothy 2010-09-16 20:45 # Firefox 3.6.9Windows 7

    额，很久都没折腾我的blog了，哪天空了专门来你这里偷师，呵呵

    Reply | Quote
    67楼
  8. yesureadmin yesureadmin 2010-09-18 14:35 # Google Chrome 6.0.472.59Windows 7

    能折腾，我来试一下

    Reply | Quote
    68楼
  9. Goku Goku 2010-09-20 10:31 # Firefox 3.6.10Windows Vista

    啥时候帮我折腾下？ :razz:

    Reply | Quote
    69楼
  10. Rayee Rayee 2010-09-21 17:47 # Firefox 3.6.10Windows 7

    laodao_span_num = landao_span_arr.length - 1; // 统计span数量并减 1 处理

    landao_span_arr，笔误吧。 :evil:

    Reply | Quote
    70楼
  11. 小奎 小奎 2010-09-26 14:29 # Google Chrome 6.0.472.63Windows XP

    大大 我看你的源碼跟教學上的一樣
    copy後...為什麼我的會只有第一則有顯示
    而且都只有切換到第一則 :?: :?:

    Reply | Quote
    71楼
  12. Jutoy Jutoy 2010-09-28 17:04 # Google Chrome 7.0.517.17Windows 7

    效果不错啊，可惜俺是JQ盲%……

    Reply | Quote
    72楼
  13. 求索阁 求索阁 2010-10-15 10:47 # 360Safe ExplorerWindows 7

    怎么过QQ的“说说”给整合到这个里面来呀？

    Reply | Quote
    73楼
  14. Ben is Me » 阶段总结。折腾记录，累死了 - pingback on 2010/10/25/ 11:38
    74楼
  15. daliu daliu 2010-10-27 21:47 # Firefox 3.6.11Windows XP

    span:eq('+laodao_i+')
    请教，这前后各一个加号是何意？我这js也是用到什么学什么。
    另外，你这主题里面jquery加载了2遍，一遍google的，一遍wordpress自带的，应该是这样，不知道这样做有别的作用？

    Reply | Quote
    75楼
    • zwwooooo zwwooooo 2010-10-28 15:35 # Google Chrome 8.0.552.18Windows 7

      @daliu
      +号是字符串组合，如：'zww'+'ooooo'，答案是：zwwooooo

      Reply | Quote
    • 大刘 大刘 2010-10-30 17:38 # Firefox 3.6.12Windows XP

      @zwwooooo
      我这是理解错了，归根结底还是对jQuery,js不熟悉，我把eq('+laodao_i+')当作一个函数了，而没有前后联系，难怪看不懂了。

      Reply | Quote
    • zwwooooo zwwooooo 2010-10-30 19:23 # Google Chrome 8.0.552.18Windows 7

      @大刘
      厄～了解一下js的运算符基础吧。

      Reply | Quote
  16. 酷剑 酷剑 2010-11-23 11:34 # TheWorld BrowserWindows XP

    其实我不知道把代码中的html加到那里去，加到侧边栏还是那里呢？

    Reply | Quote
    76楼
  17. 明月登楼 明月登楼 2011-02-25 15:10 # Maxthon 3.0Windows 7

    不错，这个创意很好，我正在想着有一个价格实时发布系统呢！

    Reply | Quote
    77楼
  18. Willin Wang Willin Wang 2011-04-16 22:56 # Firefox 4.0Windows 7 x64 Edition

    我想在你这找一个 留言头像轮播的实现方法找了半天没找到...
    分类列表AJAX调用的时候,点后退居然返回到immmmm.com了,应该改善一下用户体验.

    Reply | Quote
    78楼
  19. yesureadmin yesureadmin 2011-05-20 11:07 # Google Chrome 10.0.648.204Windows XP

    zww把你这个唠叨给加上了，你去我哪里看看，我如何，才能把这个唠叨的文字显示顺序整成从左至右呢，你默认的好像是多右到左，这样一来和我主题上的哪个TWWITER图标不配

    Reply | Quote
    79楼
    • zwwooooo zwwooooo 2011-05-20 19:14 # Namoroka 3.6.17Windows 7

      @yesureadmin
      不是我的代码吧，是你的css导致的
      #twitter_update_list {}
      把里面的
      text-align:right;
      去掉

      Reply | Quote
    • yesureadmin yesureadmin 2011-05-22 09:48 # Google Chrome 10.0.648.204Windows XP

      @zwwooooo

      zwwooooo:
      不是我的代码吧，是你的css导致的
      #twitter_update_list {}
      把里面的
      text-align:right;
      去掉

      谢谢啊,真是非常凑效,不会CSS好累啊,呵呵

      Reply | Quote
  20. yesureadmin yesureadmin 2011-05-20 11:30 # Sogou ExplorerWindows XP

    去了，记得刷新

    Reply | Quote
    80楼
  21. Joe Joe 2011-12-14 11:17 # Google Chrome 15.0.874.121GNU/Linux x64

    有点死循环的味道，打开后，CPU的占用率奇高

    Reply | Quote
    81楼

Leave a Reply


B em del U Link Code Quote

Trackbacks and Pingbacks:

Welcome! o(∩_∩)o
X