Question

求大神帮忙注释一段JS代码，越详细越好

$(document).ready(function(){
$('#select_btn li:first').css('border','none');
if ($('#zSlider').length) {
zSlider();
$('#h_sns').find('img').hover(function(){
$(this).fadeTo(200,0.5);
}, function(){
$(this).fadeTo(100,1);
});
}
function zSlider(ID, delay){
var ID=ID?ID:'#zSlider';
var delay=delay?delay:5000;
var currentEQ=0, picnum=$('#picshow_img li').size(), autoScrollFUN;
$('#select_btn li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
$('#picshow_tx li').eq(currentEQ).show();
autoScrollFUN=setTimeout(autoScroll, delay);
function autoScroll(){
clearTimeout(autoScrollFUN);
currentEQ++;
if (currentEQ>picnum-1) currentEQ=0;
$('#select_btn li').removeClass('current');
$('#picshow_img li').hide();
$('#picshow_tx li').hide().eq(currentEQ).slideDown(400);
$('#select_btn li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
autoScrollFUN = setTimeout(autoScroll, delay);
}
$('#picshow').hover(function(){
clearTimeout(autoScrollFUN);
}, function(){
autoScrollFUN = setTimeout(autoScroll, delay);
});
$('#select_btn li').hover(function(){
var picEQ=$('#select_btn li').index($(this));
if (picEQ==currentEQ) return false;
currentEQ = picEQ;
$('#select_btn li').removeClass('current');
$('#picshow_img li').hide();
$('#picshow_tx li').hide().eq(currentEQ).slideDown(100);
$('#select_btn li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
return false;
});
};
})

嘛，就这样了，求大神帮忙！

Answer 1

$(document).ready(function(){
//JQ的预加载这个你应该懂的
	$('#select_btn li:first').css('border','none');
	//选择id是select_btn的下面的第一LI，设它的CSS的border为none
	if ($('#zSlider').length) {
	//如果id是zSlider的有内容（长度）那么执行下面的操作
 		zSlider(); 
 		//执行zSlider();这个函数（在下面有定义） 
		$('#h_sns').find('img').hover(function(){
		//在id是h_sns中找IMG这个标签，鼠标移上去后或者移开后执行下面的两端代码
			$(this).fadeTo(200,0.5);
			//选中的这个li执行fadeTo(200,0.5)就是调整它的透明度
		}, function(){
			$(this).fadeTo(100,1);
			//同上
		});
	}

function zSlider(ID, delay){
//这段就是上面当zSlider的有内容（长度）时执行的那段函数了
		var ID=ID?ID:'#zSlider';
		//这里是zSlider这个函数的一个默认参数的设置，当不设参数的时候会自动设置ID为#zSlider
		var delay=delay?delay:5000;
		//同上~也是设置默认参数的
		var currentEQ=0, picnum=$('#picshow_img li').size(), autoScrollFUN;
		//设置一些函数用的变量，在下面会看到
		$('#select_btn li').eq(currentEQ).addClass('current');
		//给#select_btn这个ID下的第currentEQ（默认是0）个LI添加current这个CLASS
		$('#picshow_img li').eq(currentEQ).show();
		//让picshow_img下第currentEQ个LI显示
		$('#picshow_tx li').eq(currentEQ).show();
		//让picshow_tx下第currentEQ个LI显示
		autoScrollFUN=setTimeout(autoScroll, delay);
		//获取自动播放给autoScrollFUN以便清楚setTimeout
		function autoScroll(){
			clearTimeout(autoScrollFUN);
			//清楚上面的setTimeout
			currentEQ++;
			//给currentEQ自加，也就是循环到下一个li
			if (currentEQ>picnum-1) currentEQ=0;
			//如果超过了之前定的picnum-1那么让currentEQ从O开始也就是循环回第一个LI
			$('#select_btn li').removeClass('current');
			//select_btn下的LI移除current这个样式
			$('#picshow_img li').hide();
			//picshow_img下的li隐藏
			$('#picshow_tx li').hide().eq(currentEQ).slideDown(400);
			//picshow_tx下的li隐藏并且第currentEQ个LI缓慢收起
			$('#select_btn li').eq(currentEQ).addClass('current');
			//select_btn下的第currentEQ个LI添加样式current
			$('#picshow_img li').eq(currentEQ).show();
			//picshow_img下的第currentEQ个LI显示
			autoScrollFUN = setTimeout(autoScroll, delay);
			//然后循环开始
		}
		$('#picshow').hover(function(){
			clearTimeout(autoScrollFUN);
			//当鼠标移入picshow时，清楚autoScrollFUN，也就是之前的循环
		}, function(){
			autoScrollFUN = setTimeout(autoScroll, delay);
			//当鼠标移出时继续开始循环
		});
		$('#select_btn li').hover(function(){
			var picEQ=$('#select_btn li').index($(this));
			if (picEQ==currentEQ) return false;
			currentEQ = picEQ;
			$('#select_btn li').removeClass('current');
			$('#picshow_img li').hide();
			$('#picshow_tx li').hide().eq(currentEQ).slideDown(100);
			$('#select_btn li').eq(currentEQ).addClass('current');
			$('#picshow_img li').eq(currentEQ).show();
			return false;
			//这一整段跟上面的差不多~如果你仔细看完上面的解释下面的你自己就应该能看明白了~
		});
	};

好了~翻译的够仔细了吧~不会的话再私信我~

追问

先谢谢详细的注释！
这个自动播放的时间长短的控制是哪行代码，这个特效有一个让人头疼的地方，鼠标放上去，自动播放还会生效，想加长一下这个自动播放的时间，或者鼠标放上去停止自动播放，移开之后继续自动播放！感谢

追答

var delay=delay?delay:5000;
这个就是自动播放的时间了~你可以在调用的时候设置，也可以设置它的默认值，这里默认是5000
至于那个自动播放我一开始就感觉有问题，setTimeout好像设置的不太合适，你可以私信我，加Q慢慢商量~

追问

这个代码我网上随便找的，我不会JS，所以看着略吃力- =

追答

哦~没事~很正常，学学就会了~
var delay=delay?delay:5000;这句的意思是先判断delay如果delay是空的（也就是你没有传值）那么就让delay=500,否则如果你要是传值了就让delay等你你传进来的这个值，在后面调用的时候

setTimeout(autoScroll, delay);这个就是每隔delay这个数值的毫秒数后就执行一次autoScroll这个函数

追问

能稍微改动一下就改好吗？如果麻烦就算了

追答

可能是你使用的ID错了~你是按照它的那个ID改的嘛？把文件发给我我给你改改~应该不难~时间这个很简单~改个数值就行了~

Answer 2

$(document).ready(function(){
$('#select_btn li:first').css('border','none'); // 去吃 select_btn 下的 第一个li对象的边框
if ($('#zSlider').length) { //是否存在 #zSlider对象
zSlider();
$('#h_sns').find('img').hover(function(){ // 在 #h_sns 下发现 img 对象 鼠标 移入移除 触发
$(this).fadeTo(200,0.5);
}, function(){
$(this).fadeTo(100,1);
});
}
function zSlider(ID, delay){
var ID=ID?ID:'#zSlider'; 三元表达式
var delay=delay?delay:5000;
var currentEQ=0, picnum=$('#picshow_img li').size(), autoScrollFUN;
$('#select_btn li').eq(currentEQ).addClass('current'); // 选择 currentEq对象 添加样式
$('#picshow_img li').eq(currentEQ).show(); //当前 currentEq 显示
$('#picshow_tx li').eq(currentEQ).show();
autoScrollFUN=setTimeout(autoScroll, delay); //获取 setTimeout 句柄
function autoScroll(){
clearTimeout(autoScrollFUN); //清除句柄
currentEQ++;
if (currentEQ>picnum-1) currentEQ=0;
$('#select_btn li').removeClass('current');
$('#picshow_img li').hide();
$('#picshow_tx li').hide().eq(currentEQ).slideDown(400);
$('#select_btn li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
autoScrollFUN = setTimeout(autoScroll, delay);
}
$('#picshow').hover(function(){
clearTimeout(autoScrollFUN);
}, function(){
autoScrollFUN = setTimeout(autoScroll, delay);
});
$('#select_btn li').hover(function(){
var picEQ=$('#select_btn li').index($(this));
if (picEQ==currentEQ) return false;
currentEQ = picEQ;
$('#select_btn li').removeClass('current');
$('#picshow_img li').hide();
$('#picshow_tx li').hide().eq(currentEQ).slideDown(100);
$('#select_btn li').eq(currentEQ).addClass('current');
$('#picshow_img li').eq(currentEQ).show();
return false;
});
};
})

后面的差不多，没什么可解释的了。这是一个图片自动播放的jquery特效。

Answer 3

最不喜欢看别人代码了

Answer 4

jquery的api，到里面去找吧！