图库上一个和下一个按钮不起作用
问题描述:
我有一个图像库,由两行5个图像组成,共10个图像。我将拥有20张图像,并且当用户按下下一个按钮时,图库会移动到下面的10张图像,之前用户被带到之前的10张图像。对于我的生活,我无法弄清楚为什么我的上一个和下一个按钮不起作用。图库上一个和下一个按钮不起作用
的jQuery:
var $item = $('div.folder'), //Cache your DOM selector
visible = 5, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ($item.length/visible) - 1; //End index
$('div#arrowR-spring').click(function() {
if (index < endIndex) {
index++;
$item.animate({
'left': '-=315px'
});
} else {
index = 0;
$item.animate({
'left': '+=' + (315 * endIndex) + 'px'
});
}
});
$('div#arrowL-spring').click(function() {
if (index > 0) {
index--;
$item.animate({
'left': '+=315px'
});
} else {
index = endIndex;
$item.animate({
'left': '-=' + (315 * endIndex) + 'px'
});
}
});
这是我目前有:link to my fiddle。任何帮助将不胜感激!
答
我不确定你的计算结果,但是你的动画出现了一些错误。尝试下面加以纠正:
$('#arrowR').click(function(){
if(index < endIndex){
index++;
$item.animate({'margin-left':'-=315'});
} else {
index = 0;
$item.animate({'margin-left':'+='+(315*endIndex)});
}
});
$('#arrowL').click(function(){
if(index > 0){
index--;
$item.animate({'margin-left':'+=315'});
} else {
index = endIndex;
$item.animate({'margin-left':'-='+(315*endIndex)});
}
});
答
我只能看到你的HTML代码中的10个项目是jsfiddle。但是,您正试图更改剩余的10个项目的索引,这些项目不存在于HTML中。再次查看HTML代码,并确保您有20件物品。
+0
感谢您的答复PM ...就行了。 – jsavage980 2013-03-12 13:01:08
namkaha感谢您的回应....我如何设置动画的速度?谢谢! – jsavage980 2013-03-12 13:00:38
@ jsavage980:使用$ item.animate({'margin-left':' - = 315'},300); – phnkha 2013-03-12 13:13:25
感谢您的帮助namkaha!非常感激!! – jsavage980 2013-03-12 13:48:17