轮播图和懒加载图片

最新推荐文章于 2023-02-22 00:35:16 发布

柚木普·

最新推荐文章于 2023-02-22 00:35:16 发布

阅读量676

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_68541330/article/details/124107867

版权

本文介绍了使用JavaScript实现懒加载图片的原理，强调了获取视口高度和滑动距离的重要性，并展示了如何让图片在距离视口一定距离时才显示。同时，文章还探讨了轮播图的基本实现，通过类的切换实现实时更新，并强调了在事件监听中应直接操作img标签而非a标签，以确保点击功能正常。

摘要由CSDN通过智能技术生成

文档坐标：
文档坐标在html文件加载完成之后，宽高就已经确定了
视口坐标：
人们眼中看到的范围

文档一般是大于视口或者是等于视口

懒加载图片

当图片距离父级元素的距离不小于滑条滚动距离加上视口高度时，不会显示出来
首先我们要先获得视口高度
同时我们也要拿到滑条滑动距离

        // documentElement代表着HTML，clientheight代表着页口高度
       let height=document.documentElement.clientHeight;
       滑动距离
       let scrollTop=document.documentElement.chlientHeight;
       console.log(height);
    //    输出值为：739

<style>
    .imgs
    {
        display: flex;
        flex-flow: row wrap;
        width: 100vw;
    }
    img
    {
        width:50vw;
    }
</style>
<body>
    <div class="imgs">
        <img data-scr="31.jpeg" src="34.jpg" alt="">
        <img data-scr="32.jpeg" src="34.jpg" alt="">
        <img data-scr="33.jpeg" src="34.jpg" alt="">
        <img data-scr="34.jpeg" src="34.jpg" alt="">
        <img data-scr="35.jpeg" src="34.jpg" alt="">
        <img data-scr="36.jpeg" src="34.jpg" alt=""&