[英]jQuery: scroll left / right to next div
我有一个父.slider-wrap
div,宽度为100%
,里面有3个.slider-slide-wrap
子div,每个div的宽度为680px
。 您可以在.slider-wrap
div中水平滚动。
我还创建了2个.slider-nav
div, #slider-left
, #slider-right
,您可以使用滚动条随意滚动,但是如果单击随时#slider-right
div,它将使您滑到下一个.slider-slide-wrap
div实例。 因此,这2个.slider-nav
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
});
});
});
如果有可能吗? 任何建议将不胜感激!
首先,我认为您需要一个指示器来标识用户已滚动到哪张幻灯片,或者当前在视口上的哪张幻灯片,以便此左右滚动正常工作。
/*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');
}
});
PS。 您也不需要很多$(document).ready()
,一个就可以了,这是一种最佳实践。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.