这个是我前几天折腾的一段 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简单实现信息轮换显示效果（渐显渐隐）
• 本文链接：https://zww.me/archives/25302
• 发布时间：2010年09月12日 10:18
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！