0

关于CIRCULAR CONTENT CAROUSEL WITH JQUERY by tympanus 的问题

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

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

请帮忙！

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




// 克隆右边/左边的元素，并根据 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 );
                    });
                }
                别的 {
                    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;
                });
            });
4

2 回答 2

2

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

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

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

在此处查看工作演示

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

  1. 我只是在“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
            };

  2. 添加此选项后，我们现在回到第 4 行，即“导航”方法。刚刚过去的第一个 if 语句（这允许正确签入所有选项，我们将需要其中的几个），我添加了另外 2 个 if 语句，如果全部为真，则简单地“返回”并将动画变量重置为 false（这是存储的在缓存变量中）。这些 if 语句检查第一个和最后一个元素的方向和位置。

    • 第一个 if 语句非常简单。如果 dir =-1那么我们知道用户点击了“prev”。然后我检查position().left第一项，如果 = to 0，那么我们不需要继续。

      if (dir == -1 && !opts.infinite && $wrapper.find('div.ca-item').first().position().left == 0) { 
    cache.isAnimating = false; 
    return; 
}

    • 第二个有点棘手。它需要知道什么时候离开与预期的动画完全相同。因此，我借用了在第 36 行找到的计算$wrapper.find('div.ca-item').each。

      if (dir == 1 && !opts.infinite && $wrapper.find('div.ca-item').last().position().left == (cache.itemW * factor * scroll)) {  
    cache.isAnimating = false;  
    return;  
}

  3. 几乎最后，做一个更简单的修复。最初在第 17 行（不过，如果您按照我的指示到此为止，它将向下几行），您应该找到一个 if 语句开头if( dir === 1 ) {。这仍然在“导航”方法中。在这里，我们需要添加一个检查，以确保如果“无限”选项为 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 );
        });
    }
}

  4. 最后！哇！最后一步，如果检查那个邪恶的删除。最初在第 40 行，您会$item.remove();在 '$wrapper.find('div.ca-item').each(function(i) {' 中找到仍在“导航”方法中。只需将这一行更改为以下内容：

    if (opts.infinite) $item.remove();

维奥拉！全部完成！看？一点都不难！希望这可以帮助！

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

于 2013-05-16T13:57:04.233 回答
0

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

我只是在 jquery.contentcarousel.js 第 222 行（大约）处添加了 Prev 和 next click 代码。

// 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++;
    }
});
于 2016-11-08T07:38:47.897 回答