Question

目前我已经拥有了它，如果您点击任何编号按钮，下一个/上一个按钮或旋转木马中的图像，脚本将调整旋转木马将其移动到视口的中心。但是，我注意到如果你点击与第二个轮播相关的任何按钮，页面将一直向上滚动并调整到第一个轮播。我怎样才能调整正确的旋转木马？例如，按下与＃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/

跳跃＆＃34;延迟＆＃34;是由动画引起的。如果删除动画，它会立即显示正确的位置：

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

单击按钮将错误的轮播对中（Jquery）

1 个答案: