Question

跪求这段jquery banner切换代码的解释

这个是个图片切换的banner的代码，在学这个，但是看不太懂，求大神解释！！

这是html部分：
<div id="banner">
<div id="banner_bg"></div> <!--标题背景-->
<div id="banner_info"></div> <!--标题-->
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="banner_list">
<a href="#" target="_blank"><img src="images/1.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="images/2.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="images/3.jpg" title="" alt="" /></a>
<a href="#" target="_blank"><img src="images/4.jpg" title="" alt="" /></a>
</div>
</div>

这是jQuery部分：

<script>
var t = n = 0, count;
$(document).ready(function(){
count=$("#banner_list a").length;
$("#banner_list a:not(:first-child)").hide();
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){
window.open($("#banner_list a:first-child").attr('href'), "_blank")});
$("#banner li").click(function() {
var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
n = i;
if (i >= count) return;
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("banner").style.background="";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

function showAuto()
{
n = n >=(count - 1) ? 0 : ++n;
$("#banner li").eq(n).trigger('click');
}

</script>

Answer 1

//将当前显示的BANNER图片的索引值设置为0，也就是默认是第一个图片的序号
var t = n = 0, count;
$(document).ready(function(){
	//定义获取四张BANNER图
	count=$("#banner_list a").length; 
	//设置默认显示第一张BANNER图，其他的隐藏
	$("#banner_list a:not(:first-child)").hide(); 、
	//设置默认标题为第一张图标的alt信息
	$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
	//点击默认的标题，链接到第一张BANNER图的a链接地址
	$("#banner_info").click(function(){
		window.open($("#banner_list a:first-child").attr('href'), "_blank")
	});
	//这里为切换数字按钮点击事件
	$("#banner li").click(function() {
		//获取Li元素内的值，即1，2，3，4
		var i = $(this).text() - 1;
		//将i的值赋值给新变量n（也就是当前显示图片的索引值序号）
		n = i;
		//如果被点击的数字按钮的值大于等于BANNER的总数则退出当前语句
		if (i >= count) return;
		//设置标题为当前点击按钮对应的BANNER图片的alt信息
		$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
		//删除标题绑定的事件并重新设置标题点击后 打开点击按钮对应的BANNER图片的a链接
		$("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
		//将所有的BANNER图淡入隐藏 当前点击按钮对应的BANNER图片淡入显示
		$("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
		//将容器#banner的背景设置为空
		document.getElementById("banner").style.background="";
		//将当前点击按钮的样式设置为高亮样式on
		$(this).toggleClass("on");
		//清除其它点击按钮的高亮样式
		$(this).siblings().removeAttr("class");
	});
	
	//设置默认的定时器  每4s执行一次showauto函数
	t = setInterval("showAuto()", 4000);
	//容器#banner鼠标移入后 清清除定时器 （也就是鼠标移动到BANNER上面停止切换），移开则继续切换
	$("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})

//定义自动切换的函数
function showAuto()
{
	//如果当前切换的图片索引值大于所有图片的数量 
	//也就是当切换到最后一张图片再继续切换的时候 则将当前图片索引设置为0（第一张）
	//否则则将当前图片的索引值+1
	n = n >=(count - 1) ? 0 : ++n;
	//重新触发当前BANNER的click事件
	$("#banner li").eq(n).trigger('click');
}

追问

请问下这个函数是什么意思啊filter(":visible")，W3C的解释太生硬了，看不懂。。。
还有这一句的用处是什么，这一句我删除了试试没有什么影响
if (i >= count) return;
可以给QQ什么的联系方式吗，还有一个特效想请教下你