我有一个我想要创建的无限旋转木马的初始设置。执行时，它使用绝对坐标依次放置从0到n的幻灯片，并将最后一张幻灯片添加到当前幻灯片的左侧。最后，您必须至少能够看到3张幻灯片。一张完全可见，另一张部分可见，无法让用户单击，并将此幻灯片设置为活动幻灯片（中间的一张）。
如果我放大和缩小，一切都开始变得疯狂，幻灯片的位置不再正确，因为它们是以绝对方式定位的，并且根据我放大或缩小的情况，或多或少的宽度是可用的。
当用户放大和缩小时，如何保持相同的结构（中间的活动滑块和其他的滑动）。我读过一些关于窗口大小调整事件的文章，这可以完成这项工作，但这是一个好的实践吗？通过“调整大小”事件，当窗口更改时，我将收到通知，我可以再次按照顺序重新定位旋转木马中的所有幻灯片。
let container = document.getElementById("container");
let slides = document.getElementsByClassName("slide");
let colors = ["red", "green","purple","blue"];
let slideWidth = slides[0].offsetWidth;
let slideHeight = slides[0].offsetHeight;
let containerWidth = container.offsetWidth;
/*console.log("container -> "+containerWidth);
console.log(slideWidth);
console.log(slideHeight);
console.log((containerWidth-slideWidth)/2+"px");*/
for(let i=0 ; i<slides.length; ++i)
{
slides[i].style.backgroundColor = colors[i];
slides[i].style.left = `${(slideWidth*i +(containerWidth-slideWidth)/2)}px`;
}
slides[slides.length-1].style.left = `${(-slideWidth +(containerWidth-slideWidth)/2)}px`;.container {
display: block;
width: 100%;
position:relative;
}
.slide {
width:80%;
height:400px;
flex-shrink:0;
position:absolute;
}<html>
<body>
<div id="container" class="container">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</body>
</html>
暂无答案！
目前还没有任何答案，快来回答吧！