jQuery：循環連續div旋轉木馬

我創建了一個非常簡單的旋轉木馬來循環一組div，我現在有點卡住了，但是...在這種情況下，您可以從slide 01到slide 07然後再返回，理想情況下我想旋轉木馬循環，因此在slide 07之後，您獲得slide 01。我沒有使用輪播插件的原因是（因爲您可能會建議），因爲我想要一個突出部分，因此當您使用slide 01時，您可以在右側看到50px的slide 07，在右側看到0123px的圖標，右側是50px的slide 02。
看到我的jsfiddle演示在這裏：http://jsfiddle.net/neal_fletcher/BBXnP/3/

HTML：jQuery：循環連續div旋轉木馬

<div class="outerwrapper"> 
    <div class="innerwrapper"> 
     <div class="inner-slide">SLIDE 01</div> 
     <div class="inner-slide">SLIDE 02</div> 
     <div class="inner-slide">SLIDE 03</div> 
     <div class="inner-slide">SLIDE 04</div> 
     <div class="inner-slide">SLIDE 05</div> 
     <div class="inner-slide">SLIDE 06</div> 
     <div class="inner-slide">SLIDE 07</div> 
    </div> 
</div> 

<div id="left">LEFT</div> 
<div id="right">RIGHT</div>

的jQuery：

$(function() { 

    var animating = false, 
     outerwrap = $(".outerwrapper"); 

    $("#right, #left").click(function() { 
     if (animating) { 
      return; 
     } 
     var dir = (this.id === "right") ? '+=' : '-=', 
      width = $(".inner-slide").width(); 
     animating = true; 
     outerwrap.animate({ 
      scrollLeft: dir + width 
     }, 600, function() { 
      animating = false; 
     }); 
    }); 

});

FYI在它去上班有點像BBC主頁滑塊結束：http://www.bbc.co.uk，你可以看到下面的下一個和上一個部分。
任何建議將不勝感激！

來源

2013-10-01 user1374796

您可能對Mod運算符感興趣：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators – kunalbhat

這絕不是完美的，但它可能會給你一個大致的想法。另外，我冒昧地將你的代碼分成幾部分。

基本的想法是克隆前2和後2並將它們放在列表的兩端。

Check it out

初始化變量：

var animating = false, 
    slideWidth = $('.inner-slide').width(), 
    $wrapper = $('.outerwrapper'), 
    slideIndex = 2, 
    slideLen = $('.inner-slide').length,

構建基本框架：

build = function() { 
     $firstClone = $('.inner-slide').eq(0).clone(); 
     $secondClone = $('.inner-slide').eq(1).clone(); 
     $preLastClone = $('.inner-slide').eq(slideLen - 2).clone(); 
     $lastClone = $('.inner-slide').eq(slideLen - 1).clone(); 
     $wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone); 
     $wrapper.animate({ 
      scrollLeft: '+=' + slideWidth * slideIndex + 'px' 
     }, 0); 
    },

功能滑動包裝

slide = function(dir, speed) { 
     if(!animating) { 
      animating = true; 
      dir == 'right' ? slideIndex++ : slideIndex--; 
      slideIndex == slideLen - 1 ? slideIndex == 0 : ''; 

      if(slideIndex == 0 && dir == 'left') { 
       //if the slide is at the beginning and going left 

       slideIndex = slideLen + 1;     
       $wrapper.animate({ 
        scrollLeft: slideIndex * slideWidth + 'px' 
       }, 0, function() { 
        animating = false;  
       }); 
       slideIndex--; 

      } else if(slideIndex == slideLen + 2 && dir == 'right') { 
       //if the slide is at the end and going right 

       slideIndex = 1;     
       $wrapper.animate({ 
        scrollLeft: slideIndex * slideWidth + 'px' 
       }, 0, function() { 
        animating = false;  
       }); 
       slideIndex++; 

      } 
      $wrapper.animate({ 
       scrollLeft: slideIndex * slideWidth + 'px' 
      }, speed, function() { 
       animating = false;  
      }); 
     } 
    };

實際executio n：

$(function() { 
    build(); 
    $('#right, #left').on('click', function() { 
     slide($(this).attr('id'), 600) 
    }); 
});

我相信有更好的方法來做到這一點，但這是一個開始！

來源

2013-10-01 21:41:11 Chad

你可以大概瞭解它，但看看.append（）和.prepend（）方法。

代碼：

$('.innerwrapper').append($('.inner-slide').eq(0));

將移動（不復制！）第一張幻燈片到最後位置「innerwrapper」的div和：

$('.innerwrapper').prepend($('.inner-slide').eq(-1));

將最後一張幻燈片移動到第一位置。

乾杯！

來源

2013-10-01 21:40:09 Arius

jQuery：循環連續div旋轉木馬

回答

相關問題