如何不断检查可见图像的高度?

时间:2018-11-02 18:54:48

标签: jquery html slider

我有一个图像滑块,需要滑块的高度始终与滑块中当前可见的图像的高度相同。

我已将此代码设置为自动检查滑块内图像的高度,但是它仅检查第一张图像。当滑块旋转到下一张图像时,滑块的高度将变为“ 0px”,但是当滑块返回第一张图像时,滑块将正确记录该高度。

如何获取此代码以正确注册当前滑块图像的高度并将此高度应用于滑块。

HTML

<div class="slider">
    <img src="#"/>
    <img src="#"/>
    <img src="#"/>
</div>

jQuery

function checkForChanges() {
    var cool = $('.slider img').height() + "px";
    $('.slider').css('height', cool);
}
setInterval(checkForChanges, 1000);

1 个答案:

答案 0 :(得分:1)

这是一种出色的javascript解决方案。

您需要为每个图像分配类“ slide-img ”,该类才能起作用。您需要填写for循环的内容。但这将获得每个图像的高度。

(function checkHeight() {

    // Create array of images
    let arr_imgs = document.querySelectoryAll('.slide-img');

    // for each image -> do somthing
    arr_imgs.forEach(function(e) {

        let imgHeight = e.clientHeight();

    });


});