Question

我制作了这个完全可用的图像滑块，现在我唯一要做的就是将其高度调整为当前图像的纵横比。我编写了一个循环，用于计算滑块中每个图像的长宽比，唯一的问题是，执行循环时，循环一次返回所有值，当我只需要它为{{1} }每次点击。

我尝试将adjustedHeight放入循环中，将所有值推入数组，这需要另一个循环才能在数组的值之间进行迭代，但是所有这些感觉都比需要的复杂。

i++

JavaScript

<div class="slider-images">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x960.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
</div>

CSS

const images = document.querySelector('.slider-images');
const image = document.querySelectorAll('.slider-images img');

var i;

function slideRight() {
    //...

    for (i = 0; i < image.length; i++) { // Calculates aspect ratio
        const allImagesWidth = image[i].naturalWidth, 
            allImagesHeight = image[i].naturalHeight;
        const aspectRatio = allImagesWidth / allImagesHeight;
        adjustedHeight = Math.round(slideWidth / aspectRatio); // Final slider height required for a current shown image
    }

    images.style.height = adjustedHeight + 'px'; // Dynamically should add respective height calculated in the loop above

    //...

}
document.querySelector('.slide-right').addEventListener('click', slideRight, false);

Answer 1

最终解决了，可以根据需要垂直调整大小并进行调整。只需将循环移到slideRight函数上方，设置新的空数组变量imageArray，push，从循环到该数组的所有内容，然后在函数中设置样式以从中读取该数组并根据用于滑块工作的变量position = 0来更改宽度。

还可以进行样式调整，将max-height从.slider-images中移除，并将.slider-images img设置为max-height: unset;，以防您将img设置为{{ 1}}。

max-height: 100%;

在JavaScript中将图像滑块调整为当前图像的高宽比

1 个答案: