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

这个方法貌似在其他主题看过类似的方法，方法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）
• 本文链接：https://zww.me/archives/25368
• 发布时间：2010年12月27日 10:18
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！