See Working Demo Here

Question

关于CIRCULAR CONTENT CAROUSEL WITH JQUERY 的问题通过鼓室

我正在将它实现到一个Web项目，到目前为止它完美地工作但需要它停止循环/克隆左右，并在它到达最后一个孩子或第一个孩子时停止滚动。基本上是去除无限循环/循环效果。

我认为这是改变做伎俩的部分，但太糟糕了，我无法理解逻辑，

请帮忙！

抱歉英语不好，我来自马来西亚



// clone the elements on the right / left and append / prepend them according to dir and scroll
                if( dir === 1 ) {
                    $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
                        $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
                    });
                }
                else {
                    var $first  = $wrapper.children().eq(0);

                $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
                    // insert before $first so they stay in the right order
                    $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
                });
            }

            // animate the left of each item
            // the calculations are dependent on dir and on the cache.expanded value
            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this);
                $item.stop().animate({
                    left    :  ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
                }, opts.sliderSpeed, opts.sliderEasing, function() {
                    if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
                        // remove the item that was cloned
                        $item.remove();
                    }                       
                    cache.isAnimating   = false;
                });
            });

Answer 1

我发现这个插件并不难读，所以我给你写了一个自定义版本，其中包含你要求的功能。我认为。如果我读这篇文章，你想要它的所有功能，除了你不希望它是无限的。因此，我在此自定义版本中添加了一个选项，以提供此类功能。要关闭无限循环，只需将其设置为false，如下所示：

$('#ca-container').contentcarousel({ infinite: false });

这将导致轮播在第一帧和最后一帧停止。

See Working Demo Here

如果您不想自己进行调整，只需将演示中的代码复制并粘贴到JS文件中即可。用此更新替换旧代码。否则，调整，如果你决定自己做，不是很难。

我只是在“init”方法中添加了该选项。此方法从第139行开始。我将选项添加到第149行。

methods = {
    init        : function( options ) {

        if( this.length ) {

            var settings = {
                sliderSpeed     : 500,          // speed for the sliding animation
                sliderEasing    : 'easeOutExpo',// easing for the sliding animation
                itemSpeed       : 500,          // speed for the item animation (open / close)
                itemEasing      : 'easeOutExpo',// easing for the item animation (open / close)
                scroll          : 1,            // number of items to scroll at a time
/*ADDED OPTION! */  infinite: true  //  tells carousel wether or not to clone items and/or continue scroll past first and last
            };

添加此选项后，我们现在返回第4行，即“导航”方法。刚刚超过第一个if语句（这允许正确检查所有选项，我们需要其中几个），我添加了2个if语句，只要“返回”，如果全部为真＆amp;将动画变量重置为false（这存储在缓存变量中）。这些if语句检查第一个和最后一个元素的方向和位置。
- 第一个if语句非常简单。如果dir = -1，那么我们知道用户点击了“prev”。然后，我检查第一项的position().left，如果= 0，则无需继续。
```
if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) { 
    cache.isAnimating = false; 
    return; 
}
```
- 第二个有点棘手。它需要知道何时离开与预期的动画完全相同。因此，我借用了$wrapper.find('div.ca-item').each中第36行的计算结果。
```
if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) {  
    cache.isAnimating = false;  
    return;  
}
```

几乎最后，再做一个简单的修复。最初在第17行（如果你按照我的指示，这将是几行），你应该找到一个以if( dir === 1 ) {开头的if语句。这仍然在“导航”方法中。这里我们需要添加一个检查，以确保如果“infinite”选项为false，则不执行if语句。为什么？因为这是“邪恶的克隆”发生导致项目“四处移动”，但这不是旧项目被删除的地方。还有一步。现在，只需将旧的if语句包装如下：

if (opts.infinite) {
    if( dir === 1 ) {
        $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
            $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
        });
    }
    else {
        var $first  = $wrapper.children().eq(0);

        $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
            // insert before $first so they stay in the right order
            $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
        });
    }
}

最后！ WOOT！最后一步，如果检查那个邪恶删除。最初在第40行，你会在'$ wrapper.find（'div.ca-item'）中找到$item.remove();。每个（function（i）{'仍然在“navigate”方法中。只需更改一个以下内容：
```
if (opts.infinite) $item.remove();
```

VIOLA！全部完成！看到？一点也不难！希望这有帮助！

“一切都很容易......当你不去想它们的时候！”

Answer 2

我有一个简单的解决方案......

我只是在第222行（约）的jquery.contentcarousel.js中添加了上一个和下一个点击代码。

// navigate left

var i = 4;
var itemsLength = $('div.ca-item').length;

$navPrev.bind('click.contentcarousel', function( event ) {                                                    
    if(i == 4) 
    {
        return false;
    }
    else
    {
        if( cache.isAnimating ) return false;
        cache.isAnimating   = true;
        aux.navigate( -1, $el, $wrapper, settings, cache );
        --i;
    }
});

// navigate right

$navNext.bind('click.contentcarousel', function( event ) {                                                  
    if(i == itemsLength) 
    {
        return false;
    }
    else
    {
        if( cache.isAnimating ) return false;
        cache.isAnimating   = true;
        aux.navigate( 1, $el, $wrapper, settings, cache );
        i++;
    }
});

循环内容轮播删除循环

2 个答案:

See Working Demo Here