Old

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

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

120 comments

  1. Choikit Choikit Google Chrome 8.0.552.224 Google Chrome 8.0.552.224 Windows XP Windows XP

    技術帖,先來沙發一下,嘿嘿~

    沙发
  2. 老鲨 老鲨 Internet Explorer 7.0 Internet Explorer 7.0 Windows XP Windows XP

    WP菜鸟来膜拜博主的。。

    板凳
  3. 一世年华 一世年华 Google Chrome 8.0.552.224 Google Chrome 8.0.552.224 Windows 7 Windows 7

    我是来学习 如何折腾的。。。

    地板
  4. ......
  5. wmtimes wmtimes Google Chrome 10.0.612.3 Google Chrome 10.0.612.3 Windows 7 Windows 7

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

    41楼
  6. 奚少 奚少 Firefox 3.6.13 Firefox 3.6.13 Windows 7 Windows 7

    这些一个个学习~

    42楼
  7. 苏扬 苏扬 Google Chrome 8.0.552.215 Google Chrome 8.0.552.215 Windows 7 Windows 7

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

    43楼
  8. 球犯 球犯 Firefox 3.6.13 Firefox 3.6.13 Windows XP Windows XP

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

    45楼
  9. 万戈 万戈 Firefox 3.6.13 Firefox 3.6.13 Windows XP Windows XP

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

    46楼
  10. 爱惜 爱惜 Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 Windows 7

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

    47楼
    • zwwooooo zwwooooo Namoroka 3.6.14pre Namoroka 3.6.14pre Windows 7 Windows 7

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

  11. QVOD QVOD Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7

    不会CSS。。。

    48楼
  12. 求索阁 求索阁 Google Chrome 7.0.517.44 Google Chrome 7.0.517.44 Windows 7 Windows 7

    学习了~~ :razz:

    49楼
  13. seri seri Maxthon 2.0 Maxthon 2.0 Windows 7 Windows 7

    过来学习下思路 呵呵,

    50楼
  14. liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

    51楼
    • zwwooooo zwwooooo Namoroka 3.6.15pre Namoroka 3.6.15pre Windows 7 Windows 7

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

      <span></span>

      括住。

    • liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

    • zwwooooo zwwooooo Google Chrome 10.0.648.45 Google Chrome 10.0.648.45 Windows 7 Windows 7

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

    • liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

    • zwwooooo zwwooooo Namoroka 3.6.15pre Namoroka 3.6.15pre Windows 7 Windows 7

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

    • liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

    • liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

    • zwwooooo zwwooooo Namoroka 3.6.15pre Namoroka 3.6.15pre Windows 7 Windows 7

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

    • liveme liveme Google Chrome 10.0.634.0 Google Chrome 10.0.634.0 Windows XP Windows XP

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

  15. coun coun Google Chrome 10.0.648.127 Google Chrome 10.0.648.127 Windows 7 Windows 7

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

    52楼
    • zwwooooo zwwooooo Namoroka 3.6.16pre Namoroka 3.6.16pre Windows 7 Windows 7

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

  16. 无冷 无冷 Google Chrome 10.0.648.151 Google Chrome 10.0.648.151 Windows 7 Windows 7

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

    53楼
  17. WordPress 折腾手记 9 | A.shun Blog - pingback on 2011/04/11/ 22:32
    54楼
  18. 奔跑 奔跑 Firefox 6.0 Firefox 6.0 Windows XP Windows XP

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

    55楼
    • zwwooooo zwwooooo Firefox 6.0 Firefox 6.0 Windows 7 x64 Edition Windows 7 x64 Edition

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

    • 奔跑 奔跑 Firefox 6.0 Firefox 6.0 Windows XP Windows XP

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

    • zwwooooo zwwooooo Firefox 6.0 Firefox 6.0 Windows 7 x64 Edition Windows 7 x64 Edition

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

Leave a Reply