2010年09月12日 188条评论

jQuery简单实现信息轮换显示效果(渐显渐隐)

这个是我前几天折腾的一段 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 评论翻页功能,荒淫测试。

zww
or
oooo

“jQuery简单实现信息轮换显示效果(渐显渐隐)”有188条评论

  1. 头晕中,
    对代码,天生过敏

  2. zen cart says:

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

    1. zwwooooo says:

      呵呵,挺好玩的

  3. Lazyyyyyy says:

    对代码,天生过敏

    我喜欢这句~

    1. zwwooooo says:

      过敏可以用折腾来解决

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

  5. 疾风 says:

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

    1. zwwooooo says:

      @疾风
      不会啊,箭头是指引唠叨条啊

  6. ZDAvril says:

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

    1. zwwooooo says:

      @ZDAvril
      呵呵,这个简单的玩玩吧

  7. Timothy says:

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

    1. zwwooooo says:

      @Timothy
      大家都在忙生活,唉

  8. 能折腾,我来试一下

  9. Goku says:

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

    1. zwwooooo says:

      @Goku
      忙啊~

  10. Rayee says:

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

    landao_span_arr,笔误吧。 :evil:

    1. zwwooooo says:

      @Rayee
      不是,就是landao_span_arr,这个是span总数

  11. 小奎 says:

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

    1. zwwooooo says:

      @小奎
      jQ代码没有起效?你的jq代码是否cp到js文件,还是直接在主题文件里面引用?检查一下

    2. 小奎 says:

      @zwwooooo
      有起效不過都只有顯示第一則
      然後我看看// alert(laodao_span_num);
      而...laodao_span_num 是-1

    3. ldy says:

      @小奎
      我的也只显示第一则
      然后就全隐了……

    4. zwwooooo says:

      @ldy
      ?为啥有人行有人不行呢?要注意html结构

    5. zwwooooo says:

      @ldy
      检查了一下,源代码是有错误,已经更新代码

    6. zwwooooo says:

      @小奎
      代码已经更新

    7. 小奎 says:

      @zwwooooo
      學習下代碼的哪出了錯 :grin:

    8. zwwooooo says:

      @小奎
      参数传递不了

  12. Jutoy says:

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

  13. 求索阁 says:

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

    1. zwwooooo says:

      @求索阁
      输出格式用

      <span></span>

      即可

  14. [...] 再次结束废话,把制作这个主题期间的一切收集起来: 《侧边栏加上欢迎词》 《jQuery简单实现信息轮换显示效果(渐显渐隐)》 《为网站添加分享按钮 [...]

  15. daliu says:

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

    1. zwwooooo says:

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

    2. 大刘 says:

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

    3. zwwooooo says:

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

  16. 酷剑 says:

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

    1. zwwooooo says:

      @酷剑
      你想放到哪里就加到哪里,没有限制。

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

    1. zwwooooo says:

      @明月登楼
      这是老代码,新的支持hover停止、翻页。

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

    1. zwwooooo says:

      @Willin Wang
      你不是很熟悉jq么?自己敲一个啊,不是很复杂。
      另外我这不是全站ajax,没有处理返回。

    2. @zwwooooo
      学无止境呐...这个 真不会

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

    1. zwwooooo says:

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

    2. @zwwooooo

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

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

  20. 去了,记得刷新

发表评论

昵称 *

网址

B em del U Link Code Quote