循环内容轮播删除循环

Question

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

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

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

请帮忙！

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

//克隆右边/左边的元素，并根据dir和scroll追加/前置 如果（目录=== 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; }); });

Answer 1

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

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

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

See Working Demo Here

如果您不想自己进行调整，只需将演示中的代码复制并粘贴到您的 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，如果=到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;  
     }
     

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

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

维奥拉！全做完了！看？一点都不难！希望这会有所帮助！

“所有事情都很容易......当你不去想它们的时候！”

Answer 2

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

我只是在 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++;
    }
});