Question

关于JQuery写的一段图片切换，一下是代码 求详细解释一下每段的具体意思~

以下是JS代码
// JavaScript Document
$(function() {
var index = 1;
var rol = setInterval(function() {
checkRoll()
},
5000);
var picNu = $('#roll_hdp').find("img").length;
var picWidth = 337;
$('#roll_hdp').css({
"width": picNu * picWidth
});
for (d = 1; d <= picNu; d++) {
$('<a href="javascript:void(0)">' + d + '</a>').appendTo('#qhbtn1')
};
$('#qhvs2').click(function() {
checkRoll()
});
$('#qhvs1').click(function() {
checkRoll_R()
});
var $parent = $("#roll_hdp");
function checkRoll() {
if (!$parent.is(":animated")) {
index++;
if (index == picNu + 1) {
index = 1
}
rollLeft(index)
}
};
function checkRoll_R() {
if (!$parent.is(":animated")) {
index--;
if (index == 0) {
index = picNu
}
rollLeft(index)
}
};
$('#roll_hdp').hover(function() {
clearInterval(rol)
},
function() {
clearInterval(rol);
rol = setInterval(function() {
checkRoll()
},
5000)
});
$('#qhbtn1 a').click(function() {
$(this).each(function() {
var txtNu = parseInt($(this).text());
if (index != txtNu) {
index = txtNu;
rollLeft(index);
clearInterval(rol);
rol = setInterval(function() {
checkRoll()
},
5000);
if (index == picNu) {
index = 0
}
return index
}
})
})
});
function rollLeft(index) {
var picNu = $('#roll_hdp').find("img").length;
var picWidth = 337;
rollPx = (index - 1) * picWidth;
$('#roll_hdp').animate({
"left": -rollPx
},
500, 'easeOutQuart');
var ckNu = index - 1;
var btna = $('#qhbtn1').find('a:eq(' + ckNu + ')');
$('#qhbtn1 a').not(btna).removeAttr("class");
btna.attr('class', 'vscurrent')
}
$(document).ready(function() {
$('#qhbtn1').find('a:eq(0)').attr("class", "vscurrent");
rollLeft(1)
});
求详细解释一下每条的意思.....
这个为源代码

Answer 1

//实现定位的关键函数 index参 是定位到第几张图片

function rollLeft(index) {
var picNu = $('#roll_hdp').find("img").length; //获取要切换图片数
var picWidth = 337;//图片的宽度(px)
rollPx = (index - 1) * picWidth; //算好要移动到的位置
$('#roll_hdp').animate({
"left" : -rollPx
},500, 'easeOutQuart');//定义一个动画,执行移动
var ckNu = index - 1;
//下面一段是给切换按钮换样式.
var btna = $('#qhbtn1').find('a:eq(' + ckNu + ')');//找到对应的按钮
$('#qhbtn1 a').not(btna).removeAttr("class");//移除其他按钮的class
btna.attr('class', 'vscurrent')//给对应按钮加上vscurrent样式.
}

其他都是给切换按钮绑事件什么的,什么向左,向右,还有5秒自动切换等
搞明白这一个函数,其它的都没什么问题了

Answer 2

这个东西单独看太让人头疼了，有这个js操作的html代码的话最好一起贴出来，运行一下看看效果再来对应js解释就比较简单了

追问

图片已经传上去了 麻烦了..

追答

给完整的代码吧，这么一点怎么运行。话说你的目的是要知道这个代码的原理还是你在运行代码过程出错不知道怎么解决。虽然看这js能大概想想脚本的功能，但是实际效果必须配合html代码才能知道啊。就像下象棋，你跟我讲将军，但是不看到棋盘，我都不知道各个棋子的位置，怎么知道实际的形势是什么样的。