[我已经创建了一个基本的多项目水平转盘，当您单击“左”或“右”按钮时，它会在一系列图像中移动。
我想写一些JavaScript逻辑，告诉我哪个div是容器DOM节点内屏幕上最中心的div：\
<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，无论屏幕/设备如何。
谢谢。
使用香草JavaScript，我们可以遍历每个子DIV，并通过将其左右边缘与转盘中心进行比较来找出最中心的子DIV。这是一个CodePen example of the below code in action：
function getMostCentered(container, items) {
// Find center of the container
container_bounds = container.getBoundingClientRect();
center = container_bounds.left + (container_bounds.width / 2);
// Loop through each item and compare with the center
for (var i = 0; i < items.length; i++) {
item = items[i];
item_bounds = item.getBoundingClientRect();
next = items[i+1];
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;
}
}
}