主页 / 问题 / 1127201
Accepted
yaleksandr89
Asked:2020-05-18 02:17:02 +0000 UTC2020-05-18 02:17:02 +0000 UTC

滚动时平滑的图像切换。如何实施？

  • 772

我不知道如何实现这样的功能：例如，页面上有 20 张图片

<div class="wrapper-img">
    <img src="img/1.jpg">
    <img src="img/2.jpg" style="display: none;">
    <img src="img/3.jpg" style="display: none;">
    ...
    <img src="img/20.jpg" style="display: none;">
</div>

如何通过滚动实现图像切换，即1-隐藏、2-显示等。我画了一个例子js：

$(document).ready(function () {
    $(document).on('scroll', function () {
        var stackImages = $('.wrapper-img').find('img');
            // stackImages.hide().eq($(this).index()).css("display", "block"); - срабатывает один раз, то есть скрывает картинку1, делает видимой картинку 2
        for (var i = 0; i < stackImages.length; i++){
            // ...
        }
    });
});

出现的问题： 1. 滚动时如何强制切换图片 2. 如何设置多长时间后切换

javascript

1 个回答

  1. Best Answer
    1. 为图像制作一个包装器，将图像放在那里，值为 position:absolute (或 position:fixed);
    2. 读取scrollTop值——你用鼠标滚动了多少像素，如果这个值>图片高度值，那么设置这个图片为opasiti:0；如果 > 高度 1+2 图像，则隐藏第二张照片，依此类推。
    • 2

相关问题