javascript jQuery：向左/向右滚动到下一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21033796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: scroll left / right to next div
提问by user1374796
I have a parent .slider-wrapdiv at 100%width, with 3 .slider-slide-wrapchild divs inside, each at 680pxwidth. You can scroll horizontally inside the .slider-wrapdiv.
我.slider-wrap在100%宽度上有一个父div，.slider-slide-wrap里面有 3个子 div，每个在680px宽度上。您可以在.slider-wrapdiv内水平滚动。
I've also created 2 .slider-navdivs, #slider-leftsitting on the left, and #slider-rightsitting on the right, the idea being, you can scroll as you wish using the scrollbar, but if you clicked the #slider-rightdiv at any time, it would slide you across to the next instance of .slider-slide-wrapdivs. Thus, the 2 .slider-navdivs will take you left and right to the next / previous instance of .slider-slide-wrapdiv.
我还创建了 2 个.slider-navdiv，#slider-left坐在左边，#slider-right坐在右边，这个想法是，您可以使用滚动条随意滚动，但是如果您#slider-right随时单击该div，它就会将您滑到下一个.slider-slide-wrapdiv实例。因此，2 个.slider-navdiv 将带您左右移动到.slider-slide-wrapdiv的下一个/上一个实例。
jsFiddle demo: http://jsfiddle.net/neal_fletcher/rAb3V/
jsFiddle 演示：http: //jsfiddle.net/neal_fletcher/rAb3V/
HTML:
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:
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
});
});
});
If this is at all possible? Any suggestions would be greatly appreciated!
如果这可能吗？任何建议将不胜感激！
回答by Mark S
First of I think you need to have an indicator to identify which slide the user has scrolled to, or which slide is currently on the viewport in order for this scroll left & right to work properly.
首先，我认为您需要有一个指示器来识别用户滚动到哪张幻灯片，或者哪张幻灯片当前在视口上，以便左右滚动正常工作。
/*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');
}
});
See it working of this jsfiddle.
看看这个jsfiddle 的工作。
PS. You also don't need a lot of $(document).ready(), one will do just fine and a best practice to do.
附注。你也不需要很多$(document).ready()，一个就可以了，而且是一个最佳实践。
