jQuery：向左/向右滾動到下一個div

Question

我有一個父.slider-wrap div在100%寬度，與3 .slider-slide-wrap子div內，每個在680px寬度。您可以在.slider-wrap div內水平滾動。

我還創建了2個.slider-nav的div，#slider-left坐在左邊，#slider-right坐在右邊，這個想法是，你可以滾動，你想使用滾動條，但如果你在任何時候點擊#slider-right DIV ，它會將你滑動到下一個div的實例.slider-slide-wrap divs。因此，div將帶您​​左右移動到.slider-slide-wrap div的下一個/上一個實例。

的jsfiddle演示：http://jsfiddle.net/neal_fletcher/rAb3V/

HTML：

<div class="slider-wrap"> 
    <div class="slide-wrap"> 
     <div class="slider-slide-wrap"></div> 
     <div class="slider-slide-wrap"></div> 
     <div class="slider-slide-wrap"></div> 
    </div> 
</div> 

<div id="slider-left" class="slider-nav"></div> 
<div id="slider-right" class="slider-nav"></div> 

的jQuery：

$(document).ready(function() { 

    var n = $(".slider-slide-wrap").length, 
     width = 680, 
     newwidth = width * n; 

    $('.slide-wrap').css({ 
     'width': newwidth 
    }); 

}); 


$(document).ready(function() { 
    $(".slider-slide-wrap").each(function (i) { 
     var thiswid = 680; 
     $(this).css({ 
      'left': thiswid * i 
     }); 
    }); 
}); 

如果這是在所有可能的？任何建議將不勝感激！

Answer 1

我認爲首先需要有一個指示器來識別用戶滾動到哪個幻燈片，或者哪個幻燈片當前在視口中，以便此滾動可以讓&正確工作。

/*on scroll move the indicator 'shown' class to the 
most visible slide on viewport 
*/ 
$('.slider-wrap').scroll(function() { 
    var scrollLeft = $(this).scrollLeft(); 
    $(".slider-slide-wrap").each(function (i) { 
     var posLeft = $(this).position().left 
     var w = $(this).width(); 

     if (scrollLeft >= posLeft && scrollLeft < posLeft + w) { 
      $(this).addClass('shown').siblings().removeClass('shown'); 
     } 
    }); 
}); 
/* on left button click scroll to 
    the previous sibling of the current visible slide */ 
$('#slider-left').click(function() { 
    var $prev = $('.slide-wrap .shown').prev(); 
    if ($prev.length) { 
     $('.slider-wrap').animate({ 
      scrollLeft: $prev.position().left 
     }, 'slow'); 
    } 
}); 
/* on right button click scroll to 
    the next sibling of the current visible slide */ 
$('#slider-right').click(function() { 
    var $next = $('.slide-wrap .shown').next(); 
    if ($next.length) { 
     $('.slider-wrap').animate({ 
      scrollLeft: $next.position().left 
     }, 'slow'); 
    } 
}); 

看到這裏工作jsfiddle。

PS。你也不需要很多$(document).ready()，你可以做得很好，也是最好的做法。