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. Joe says:

    有点死循环的味道,打开后,CPU的占用率奇高

    1. zwwooooo says:

      @Joe
      这个功能我用了很久木有奶说的问题

回复给 hzlzh ¬
取消回复

昵称 *

网址

B em del U Link Code Quote