javascript - 单击按钮使轮播居中错误(Jquery)

Question

目前，如果您单击任何编号按钮、下一个/上一个按钮或轮播中的图像，脚本将调整轮播以将其移动到视口(viewport)的中心。但是，我注意到，如果您单击与第二个轮播相关的任何按钮，页面将一直向后滚动并调整到第一个轮播。我怎样才能调整正确的轮播？例如，按与 #2 轮播相关的任何按钮可调整 #2 轮播，或按 #3 轮播的任何按钮可调整 #3 轮播。

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});

$(document).ready(function() {
  $("#owl-demo2").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});

var el = $('.owl-carousel .lazyOwl');
$('.owl-carousel, .owl-thumb-item').on('click', function(e) {

  //  var el = $(".lazyOwl", this);
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  } else {
    offset = elOffset;
  }
  var speed = 700;
  $('html, body').animate({
    scrollTop: offset
  }, speed);
});

var animations = new Array();
// queue all
$(".owl-thumb-item").each(function() {
  animations.push($(this));
});

// start animating
doAnimation(animations.shift());

function doAnimation(image) {
  image.fadeIn("slow", function() {
    // wait until animation is done and recurse if there are more animations
    if (animations.length > 0) doAnimation(animations.shift());
  });
}

http://jsfiddle.net/8bJUc/662/

Answer 1

你几乎猜对了!而不是:

//var el = $(".lazyOwl", this);

你应该使用这个:

var el = $(this);

http://jsfiddle.net/8bJUc/665/

跳跃“延迟”是由动画引起的。如果删除动画，它会立即显示正确的位置:

//  $('html, body').animate({
//    scrollTop: offset
//  }, speed);
  $('html, body').scrollTop(offset);