javascript - Javascript 轮播动画

Question

我正在尝试制作带有中心动画的图像轮播。我不想使用 CSS 动画，而是想使用 jQuery。

通过按下“上一个”按钮，动画将开始。其中一张将成为中心的幻灯片开始增长。我已经使用 jQueryanimate()为宽度和高度设置动画。一切都按要求工作，除了我不明白为什么动画会使中央幻灯片跳跃。

我已经创建了这个示例。如果您按下“上一个”按钮，动画将开始。

var scroll_speed = 4000;
var items_cnt = $('.mg_item').length;
var container_size = $(".main_cnt").innerWidth();
var item_avg_w = container_size / 5;
var item_center_w = ((item_avg_w / 100) * 20) + item_avg_w;
var item_center_h = (item_center_w / 16) * 9 + 30;
var item_w = ((container_size - item_center_w) / 4) - 2;
var item_h = ((item_w / 16) * 9);
var gallery_content = $('.gallery_body').html();
$('.gallery_body').html(gallery_content + gallery_content + gallery_content);
var items_offset = items_cnt * item_w + 14;

$('.gallery_body').css('left', -items_offset);
$('.mg_item').css("width", item_w);
$('.mg_item').css("height", item_h);

//$('.mg_item').css("margin-bottom", (item_center_h - item_h) / 2);
//$('.mg_item').css("margin-top", (item_center_h - item_h) / 2);
//$('.mg_item_с').css("width", item_center_w);
//$('.mg_item_с').css("height", item_center_h);
//document.documentElement.style.setProperty('--center_width', item_center_w + "px");
//document.documentElement.style.setProperty('--center_height', item_center_h + "px");

$('.main_cnt').css("height", item_center_h);
check_visible();
AssignCenter(0);

function gonext() {
  AssignCenter(-1);
  ZoomIn();
  $('.gallery_body').animate({
    left: '+=' + (item_w + 2),
  }, scroll_speed, "linear", function() {
    LoopSlides();
  });
}

function goprev() {
  AssignCenter(1);
  ZoomIn();
  $('.gallery_body').animate({
    left: '-=' + (item_w + 2),
  }, scroll_speed, "linear", function() {
    LoopSlides();
  });
}

function ZoomIn() {
  $('.center').animate({
    width: item_center_w + 'px',
    height: item_center_h + 'px',
  }, scroll_speed, function() {});
}

function LoopSlides() {
  var cur_pos = $('.gallery_body').position().left
  var left_margin = Math.abs(items_offset * 2 - item_w) * -1;
  var right_margin = 0 - item_w;
  if (cur_pos < left_margin) {
    $('.gallery_body').css('left', -items_offset);
  }
  if (cur_pos >= 0) {
    $('.gallery_body').css('left', -items_offset);

  }
  check_visible();
  AssignCenter(0);
}

function check_visible() {
  $('.mg_item').each(function(i, obj) {
    var pos = $(this).offset().left;
    if (pos < 0 || pos > container_size) {
      $(this).addClass("invisible");
      $(this).removeClass("active");
    } else {
      $(this).addClass("active");
      $(this).removeClass("invisible");
    }
  });
}

function AssignCenter(offset) {
  var center_slide = $('.active')[2 + offset];
  $('.center').each(function(i, obj) {
    $(this).removeClass("center");
  });
  $(center_slide).addClass("center");
  //$(center_slide).css("width", item_center_w);
  //$(center_slide).css("height", item_center_h);
}

:root {
  --center_width: 0px;
  --center_height: 0px;
}

.main_cnt {
  background-color: rgb(255, 0, 0);
  padding: 0px;
  overflow: hidden;
  margin: 0px;
}

.gallery_body {
  width: 500%;
  background-color: rgb(128, 128, 128);
  position: relative;
}

.mg_item {
  width: 198px;
  height: 150px;
  background-color: blue;
  display: inline-block;
  position: relative;
  margin: -1px;
  padding: 0px;
  font-size: 120px;
}

.center {
  background-color: brown;
  /*width: var(--center_width) !important;
            height: var(--center_height) !important;*/
}

.item_c {
  width: 410px;
  height: 150px;
  background-color: blueviolet;
  display: inline-block;
  position: relative;
  margin: -1px;
  padding: 0px;
  font-size: 120px;
}

.video-js .vjs-dock-text {
  text-align: right;
}

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

<div class="main_cnt">
  <div class="gallery_body">
    <div class="mg_item">1</div>
    <div class="mg_item">2</div>
    <div class="mg_item">3</div>
    <div class="mg_item">4</div>
    <div class="mg_item">5</div>
    <div class="mg_item">6</div>
    <div class="mg_item">7</div>
  </div>
</div>
<br><br>

<button onclick="gonext()">GONEXT</button>
<button onclick="goprev()">GOPREV</button>
<button onclick="check_visible()">CHEVIS</button>

标签： javascripthtmljquerycss