我正在使用jcarousellite來創建一個簡單的jQuery旋轉木馬,但我想稍微改變一下,以便圖像對於左側和最右側的項目隱藏起來,但顯示在中間項目。顯示在jCarouselLite中的位置
要做到這一點,雖然我需要能夠找到哪些列表項在任何時候都在視圖端口中顯示。我已經嘗試在源代碼中挖掘並使用包含的回調函數,但是我無法獲取與顯示的項目相符的索引號。
有沒有人有任何這方面的經驗或想法如何解決它?
編輯
OK解決了這個在一定程度上,但它仍然無法正常工作。 afterEnd函數內置於插件中,並提供當前可見項目的對象。我用它來提供列表元素的ID,並應用一些轉換。
問題是,這是所有「外部」的插件,所以如果我啓用自動滾動,所有這些代碼被忽略。我需要一些將這些代碼插入插件中的函數的方式,這就是我害怕的地方。
$(".ccvi-carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 800,
//auto: 2000,
afterEnd: function(a) {
if (start=true) {
$('li#1 .cf-img').hide();
}
left = $(a[0]).attr("id");
mid = $(a[1]).attr("id");
right = $(a[2]).attr("id");
$('.prev').click(function() {
$('li#' + left + ' .cf-img').fadeIn();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').hide();
});
$('.next').click(function() {
$('li#' + left + ' .cf-img').hide();
$('li#' + mid + ' .cf-img').hide();
$('li#' + right + ' .cf-img').fadeIn();
});
//alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
}
});
我覺得這是我需要把我的代碼到插件中的功能,但我看不出它是如何工作的。
function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
//alert (curr);
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -((v) * liSize) + "px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
//alert (curr);
} else {
curr = to;
//alert (curr);
}
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
running = true;
ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
//alert (curr-2);
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$((curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}
}
return false;
};