这是源代码:
/**
* @author Stéphane Roucheray
* @extends jquery
*/
jQuery.fn.carousel = function(previous, next, options){
var sliderList = jQuery(this).children()[0];
if (sliderList) {
var increment = jQuery(sliderList).children().outerWidth("true"),
elmnts = jQuery(sliderList).children(),
numElmts = elmnts.length,
sizeFirstElmnt = increment,
shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
firstElementOnViewPort = 1,
isAnimating = false;
for (i = 0; i < shownInViewport; i++) {
jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
jQuery(sliderList).append(jQuery(elmnts[i]).clone());
}
jQuery(previous).click(function(event){
if (!isAnimating) {
if (firstElementOnViewPort == 1) {
jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
firstElementOnViewPort = numElmts;
}
else {
firstElementOnViewPort--;
}
jQuery(sliderList).animate({
left: "+=" + increment,
y: 0,
queue: true
}, "swing", function(){isAnimating = false;});
isAnimating = true;
}
});
jQuery(next).click(function(event){
if (!isAnimating) {
if (firstElementOnViewPort > numElmts) {
firstElementOnViewPort = 2;
jQuery(sliderList).css('left', "0px");
}
else {
firstElementOnViewPort++;
}
jQuery(sliderList).animate({
left: "-=" + increment,
y: 0,
queue: true
}, "swing", function(){isAnimating = false;});
isAnimating = true;
}
});
}
};
有人能指出我如何让它变得有限吗?例如,您有4个块,当您滚动到最后一个时 - 下一个按钮停止只能工作前一个。
答案 0 :(得分:1)
好像你只需要考虑删除:
jQuery(sliderList).append(jQuery(elmnts[i]).clone());
这是获取元素并将其放入队列末尾的行。
为了防止点击next/previous
的效果,您可以使用此“黑客”:
// Save 'snownInViewport' value right before "for" cycle
sliderList.data("shownInViewport", shownInViewport);
for (i = 0; i < shownInViewport; i++) {
在previous
点击处理程序中:
if (firstElementOnViewPort == 1) {
return;
//jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
//firstElementOnViewPort = numElmts;
}
在next
点击处理程序中:
if (firstElementOnViewPort + sliderList.data("shownInViewport") > numElmts) {
return;
//firstElementOnViewPort = 2;
//jQuery(sliderList).css('left', "0px");
}