jQuery实现信息轮换显示效果(方法2)

折腾多了,能折腾的就少了,很多东东用不到就不去折腾——懒人。不过昨天我稍微改了一下我的唠叨栏代码,效果没怎么变,只是改了实现方法。

这个方法貌似在其他主题看过类似的方法,方法1可以去我以前的文章《jQuery简单实现信息轮换显示效果(渐显渐隐)》看看。现在这个新方法实现鼠标停留停止轮换,离开继续轮换。当然这个大部分幻灯片都有次功能,我只是记录一下方法而已。

下面开始用实例演示但不怎么分析,我主要注重应用。

具体代码

一、演示的 HTML 部分(具体样式自行用css定义),每条消息用<span></span>括住(当然你可以用<li></li>,改一下html和jQuery代码即可)

<div class="laodao">
	<!-- style="display:none;"可以在style.css自定义 -->
	<span>最新折腾:Ajax评论翻页,荒淫测试... </span><!--第一条不隐藏-->
	<span style="display:none;">广告: 主题定制/修改可以找我。</span>
	<span style="display:none;">其他……</span>
	<p id="prev">«</p>
	<p id="next">»</p>
</div>

二、jQuery代码部分(比以前的复杂点,不过要效果总是得牺牲点嘛)

jQuery(document).ready(function(){ //jQuery信息轮换效果 by zwwooooo
   $('#prev').click(function(){
   	$('.laodao span:visible').fadeOut('fast',
   	function() {
   		if ($(this).prev().is('span')) {
   			$(this).prev().fadeIn('fast');
   		} else {
   			$(".laodao span:last").fadeIn('fast');
   		}
   	});
   });
   $('#next').click(function(){
   	$('.laodao span:visible').fadeOut('fast',
   	function(){
   		if ($(this).next().is('span')) {
   			$(this).next().fadeIn('fast');
   		} else {
   			$('.laodao span:first').fadeIn('fast');
   		}
   	});
   });
   var b,
   a = function(){
   	$('#next').trigger('click'); //模仿click时间
   	b = setTimeout(a, 5000); //5秒轮换,下同
   };
   $('.laodao').hover(function(){//鼠标停留时
   	clearTimeout(b);//停止轮换
   },
   function(){
   	b = setTimeout(a, 5000);
   });
   b = setTimeout(a, 5000);
});

三、演示:看我博客侧边栏顶端的唠叨栏(当然动画效果稍微不同)

四、后记:其实还有个方法,不过不是自个折腾的,以后文囧时再考虑写写。

五、没了,就这样。哦,对了,有朋友玩这个遇到什么问题请留评论说明,代码我是直接修改后贴上来的,修改过的代码我没测试鸟,或许有错误。

zww
or
oooo

“jQuery实现信息轮换显示效果(方法2)”有120条评论

  1. wmtimes says:

    不错,学习下字母。提前送出祝福,元旦快乐!

  2. 奚少 says:

    这些一个个学习~

  3. 苏扬 says:

    这个不知道可不可以实现实时消息那种效果,随机展示文章,或者说弄成广告!

    1. zwwooooo says:

      @苏扬
      广告可以

  4. [...] This post was mentioned on Twitter by Max Lee, zwwooooo. zwwooooo said: 『ZWWoOoOo新文章』 jQuery实现信息轮换显示效果(方法2) http://goo.gl/fb/2n7KK [...]

  5. 球犯 says:

    Z大 你真是越来越强悍了啊 唉~我只有膜拜的份啊

    1. zwwooooo says:

      @球犯
      没啥,别膜拜,互相学习就好。

  6. 万戈 says:

    收入收藏夹,总有需要的时候

    1. zwwooooo says:

      @万戈
      嗯嗯,我们需要收藏 :mrgreen:

  7. 爱惜 says:

    之前还以为是推特的信息啊。
    另,推特FO你了哦。

    1. zwwooooo says:

      @爱惜
      我的唠叨栏是有推特的信息啊,哈哈,具体怎么应用自由发挥

  8. QVOD says:

    不会CSS。。。

    1. zwwooooo says:

      @QVOD
      你又换了个马甲 :evil:

    2. QVOD says:

      @zwwooooo
      换成英语的关键词不错吧。

    3. zwwooooo says:

      @QVOD
      对关键词没研究,不过你的站应该ok吧

  9. 求索阁 says:

    学习了~~ :razz:

  10. seri says:

    过来学习下思路 呵呵,

    1. zwwooooo says:

      @seri
      荒淫常来

  11. liveme says:

    请教一个问题,调用预先弄好的静态的文字图片就明白,但是调用好几条最新评论,应该怎么弄呢?

    1. zwwooooo says:

      @liveme
      原理上是无限的,只要你的每条评论是用

      <span></span>

      括住。

    2. liveme says:

      @zwwooooo
      关键是括住的是什么代码?如果用调用最新评论的代码,就会出现每一对span中间的都是同样的评论哦。

    3. zwwooooo says:

      @liveme
      怎么会呢?你难道不知道怎么调用么?呵呵

    4. liveme says:

      @zwwooooo
      我调用的方法跟你这个差不多的:http://zww.me/archives/24736
      如果我想单独获取第二条评论呢?用get_items(0, 5)这个函数怎么解决?

    5. zwwooooo says:

      @liveme
      get_items?这个没用过,我不知道这个函数是干嘛的。
      “只要获取第二条评论”——好奇怪的需求,你加个计数器不就得了,当计数器等于2时输出评论退出循环。

    6. liveme says:

      @zwwooooo
      万戈给的方案可以实现了,是获取评论RSS的($feed = fetch_feed( get_bloginfo('comments_rss2_url') );),不过不知道怎么隐藏掉博主的评论。
      添加if ($item->comment_author != liveme)不行。。。

    7. liveme says:

      @liveme
      噢耶,已经解决! :grin:

    8. zwwooooo says:

      @liveme
      - - 最新评论代码请用我写的最新篇……去掉博主评论是最新评论的基本要求 :mrgreen:

    9. liveme says:

      @zwwooooo
      嗯,基本要求是必须呢!

  12. coun says:

    为什么不把你正在用的代码或详细方法贴出来?
    就拿你上面那几段代码用Dw复制、粘贴,加载Jq库,也是跑不起来..
    我觉得你这样等于在敷衍我们..
    :!:

    1. zwwooooo says:

      @coun
      每个人的主题不同,不是直接CP就能用,得自己折腾下,或者用此类插件比较方便。 :mrgreen:

  13. 无冷 says:

    这段代码写的简洁多了,我写了一段轮换的麻烦的很,你这个我要学习一下

    1. zwwooooo says:

      @无冷
      互相学习

  14. [...] 信息轮换显示使用的方法是:jQuery实现信息轮换显示效果(方法2),Twitter 输出的代码也是直接找 OM 要的。 [...]

  15. 奔跑 says:

    @zwwooooo 您的侧边栏的评论、最新文章……合在一起的是代码实现的还是插件实现的啊,你有没有写插件啊。很想要啊。 :grin:

    1. zwwooooo says:

      @奔跑
      代码,木有写插件,因考虑到兼容问题+懒,也木有写相关文章

    2. 奔跑 says:

      @zwwooooo
      期待你出个教程之类的啊。另外,我还想请教下,关于zBench 这款主题,我使用子主题,如果我复制一份sidebar.php放到子主题下,则主题的RSS订阅的那个框就没有了,而且会错位,另外,这个框你们的微博怎样是在当前页面打开的,我觉得在新页面打开好些。本来是打算用子主题的方式自己修改的,发现会出现上面的问题。

    3. zwwooooo says:

      @奔跑
      其实无须加新窗口打开,这是趋势,用户自己决定要不要新窗口打开,如果用户不会,说明就是超低端用户。你一定要加,直接修改sidebar.php,为何子主题会出现你说的问题,我没试过,所以无法回答你,按道理不会出现这情况的,你再检查一下你的子主题添加步骤。

发表评论

昵称 *

网址

B em del U Link Code Quote