Question

当您按下旋转木马img时，您会注意到它会自动移动到视口中心。但是，我也希望当您按.owl-thumb-items（编号按钮）时也会发生这种情况。我尝试将thumb类添加到脚本中，如下所示：$('.owl-carousel, .owl-thumb-item')。但它显然没有用。

$('.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/660/

Answer 1

对于按钮，您的脚本将在按钮本身中查找具有“lazyOwl”类的元素。这是修复，它只引用了旋转木马中的“lazyOwl”：

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

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

Fiddle

无法通过Jquery获取按钮来居中div

1 个答案: