我正在制作带有上一个/下一个按钮的最简单的垂直轮播。我快到了，但我还没有弄清楚以下几点：
var shortnewsblockHeight = $(".shortnewsblock").outerHeight();
var totalnewsblocks = $(".shortnewsblock").length;
var i = 0;
$(".stamp.long a.prev").css({ "opacity": "0.3", "text-decoration": "none", "cursor": "default" });
goDown();
goUp();
function goDown() {
$(".stamp.long a.next").click(function () {
$(".stamp.long a.prev").animate({
'opacity': '1'
}, 300);
$(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });
i++;
if (i != (totalnewsblocks - 5)) {
$("#shortnewsblocks > #inner").stop().animate({
'marginTop': '-=' + shortnewsblockHeight
}, 600);
} else {
$("#shortnewsblocks > #inner").stop().animate({
'marginTop': '-=' + shortnewsblockHeight
}, 600);
$(".stamp.long a.next").animate({
'opacity': '0.3'
}, 300);
$(".stamp.long a.next").css({ "text-decoration": "none", "cursor": "default" });
$(".stamp.long a.prev").animate({
'opacity': '1'
}, 300);
$(".stamp.long a.prev").css({ "text-decoration": "underline", "cursor": "pointer" });
}
return false;
});
}
function goUp() {
$(".stamp.long a.prev").click(function () {
i--;
if (i != 0) {
$("#shortnewsblocks > #inner").stop().animate({
'marginTop': '+=' + shortnewsblockHeight
}, 600);
$(".stamp.long a.next").animate({
'opacity': '1'
}, 300);
$(".stamp.long a.next").css({ "text-decoration": "underline", "cursor": "pointer" });
} else {
$("#shortnewsblocks > #inner").stop().animate({
'marginTop': '+=' + shortnewsblockHeight
}, 600);
$(".stamp.long a.prev").animate({
'opacity': '0.3'
}, 300);
$(".stamp.long a.prev").css({ "text-decoration": "none", "cursor": "default" });
}
return false;
});
}
如果我在上一个/下一个按钮上单击得太快，高度就会被打乱，我的轮播会失去它的“块式”动画。
如果轮播用完了要滚动的元素，我的按钮会淡出（并且光标变为默认，因此最终用户不会尝试单击它）。但我需要让它们完全禁用，因为现在最终用户仍然可以点击它，搞砸旋转木马。
干杯!
JSFiddle：http: //jsfiddle.net/REVDc/1/