用JavaScript判断中间的div，在一个div内

Question

我创建了一个基本的多项目水平旋转木马，当您单击 "left" 或 "right" 按钮时，它会在 div 图像中移动。

我想写一些 JavaScript 逻辑，告诉我哪个 div 是屏幕上最居中的 div，在容器 DOM 节点内：\

<section class="items-container"></section>

document.addEventListener('DOMContentLoaded', function() {
  console.log('app.js loaded');

  const pixabayAPIService = PixabayAPIService();
  const carouselContainer = document.getElementById('carousel-container');
  const previousButton    = document.getElementById('previous');
  const nextButton        = document.getElementById('next');
  let count               = 0;

  console.log('count', count);

  pixabayAPIService.getImages();

  slideImages = (direction) => {
    const totalChildren = carouselContainer.getElementsByTagName('div').length;
    console.log('totalChildren', totalChildren);

    direction === 'left' ? count ++ : count --;
    console.log('updated count', count);

    carouselContainer.classList.add('horizTranslate');
    carouselContainer.style.left = count * 200 + 'px';
    carouselContainer.classList.add("slideOutLeft")

    previousButton.style.display = count < 0 ? 'block' : 'none';
    nextButton.style.display = count > 5 - totalChildren ? 'block' : 'none';
  }

  previousButton.addEventListener('click', event => {
    event.preventDefault();
    slideImages('left');
  });

  nextButton.addEventListener('click', event => {
    event.preventDefault();
    slideImages('right');
  });

  if (count === -1) {

  }
});

.home-product-new-hldr {
    position: relative;
    /* width:1140px; */
    border: 0px solid black;
    width: 1000px;
}

.carousel-container {
    width: 1000px;
    overflow:hidden;
    border: 1px solid red;
  }

.items-container {
    border: 3px solid green;
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    position:relative;
    white-space:nowrap;
}

.item {
    border: 0px solid green;
    width: 200px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
    justify-content: space-between;
}

.horizTranslate {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

  <body>

    <main>
      <h1>Carousel</h1>

      <section>
          <button id="previous" style="display: none;">left</button>
        </section>

      <div class="frame">
      <div class="carousel-container">
      <section class="items-container" id="carousel-container" style="left: 0px; border: 1px solid red";>
          <div class="item"><img src="https://www.fillmurray.com/g/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/g/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/100" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/100" /></div>
      </section>
    </div>
  </div>

  <section>
      <button id="next" style="display: block;">right</button>
    </section>

  </main>

  </body>

是的，那里列出了 6 个 div，但是当我使轮播响应时，div 中的轮播项目数量将会减少。

所以我想知道最好的方法，计算 section 节点内最居中的 div，而不考虑 screen/device.

谢谢。

Answer 1

使用 vanilla JavaScript，我们可以遍历每个子 DIV，并通过将它的左右边缘与轮播的中心进行比较来找到最居中的。这是 CodePen example of the below code in action:

function getMostCentered(container, items) {
  // Find center of the container
  let container_bounds = container.getBoundingClientRect(),
      center = container_bounds.left + (container_bounds.width / 2);

  // Loop through each item and compare with the center
  for (let i = 0; i < items.length; i++) {
    let item = items[i],
        next = items[i+1],
        item_bounds = item.getBoundingClientRect(),
        next_bounds = next && next.getBoundingClientRect();

    // Find the first item whose left edge is past the center 
    if (next && next_bounds.left > center) {
      // and compare it with the previous item to see which is closer
      if (next_bounds.left - center < center - item_bounds.right) {
        return next;
      } else {
        return item;
      }
    // If we've hit the last item then it must be closest
    } else if (!next) {
      return item
    }
  }
}

用JavaScript判断中间的div，在一个div内

Using JavaScript to determine the middle div, within a div

html

javascript

dom

carousel