-1

这是源代码：

/**
 * @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 个块，当您滚动到最后一个块时 - 下一个按钮停止工作，只工作前一个块。

4

1 回答 1

1

似乎您只需要考虑删除：

jQuery(sliderList).append(jQuery(elmnts[i]).clone());

这是接受一个元素并将其放入队列末尾的行。

为防止点击效果，next/previous您可以使用此“hack”：

// 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");
}
于 2013-07-13T15:45:27.343 回答