单击按钮会使错误的轮播居中 (Jquery）

Clicking a button centers the wrong carousel (Jquery)

本文关键字：Jquery 按钮 错误 单击      更新时间：2023-09-26

目前我有它，如果您单击任何编号按钮、下一个/上一个按钮或轮播中的图像，脚本将调整轮播以将其移动到视口的中心。但是，我注意到，如果您单击与第二个轮播关联的任何按钮，页面将一直向上滚动并调整到第一个轮播。如何获取它以调整正确的轮播？例如，按与 #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/

你差点就对了！而不是：

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

你应该使用这个：

var el = $(this);

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

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

//  $('html, body').animate({
//    scrollTop: offset
//  }, speed);
  $('html, body').scrollTop(offset);
相关文章：