Blogger Information
Blog 70
fans 4
comment 5
visits 103764
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript:1.图片懒加载演示;2.轮播图为翻页按钮添加功能;
JiaJieChen
Original
6310 people have browsed it

JavaScript:1.懒加载演示;2.轮播图为翻页按钮添加功能;

一.图片懒加载演示

关于高度 代码
视口高度 clientHeight
滚动高度 scrollTop
距离父级高度 offsetTop

       
  1. <script>
  2. //首先拿到所有的图片
  3. constimg=document.querySelectorAll(".box img");
  4. //然后拿到视口高度
  5. constclientHeight=document.documentElement.clientHeight;
  6. //创建懒加载函数回调
  7. functionlayzyload(){
  8. //创建滚动距离变量
  9. let scrollTop=document.documentElement.scrollTop;
  10. //用forEach遍历img
  11. img.forEach((img)=>{
  12. //用if语句来判断这张图片的顶部距离它的父级的高度,是否小于视口高度与滚动距离之和
  13. //offsetTop 图片距离父级的高度
  14. if(img.offsetTop<clientHeight+scrollTop){
  15. //延迟函数 setTimeout
  16. setTimeout(()=>{
  17. //延迟0.5秒替换显示图片的路径
  18. img.src=img.dataset.src;
  19. },500);
  20. }
  21. });
  22. }
  23. //创建监听滚动事件
  24. // scroll: 滚动事件,
  25. window.addEventListener("scroll",layzyload);
  26. //load:当页面加载完成后立即显示第一屏
  27. window.addEventListener("load",layzyload);
  28. script>

二.轮播图为翻页按钮添加功能

代码块

       
  1. lang="en">
  2. charset="UTF-8"/>
  3. http-equiv="X-UA-Compatible"content="IE=edge"/>
  4. name="viewport"content="width=device-width, initial-scale=1.0"/>
  5. </span><span class="pln">轮播图</span><span class="tag">
  6. class="box">
  7. class="imgs">
  8. href=""
  9. >src="banner/banner1.jpg"alt=""data-index="1"class="active"
  10. />
  11. href="">src="banner/banner2.jpg"alt=""data-index="2"/>
  12. href="">src="banner/banner3.jpg"alt=""data-index="3"/>
  13. href="">src="banner/banner4.jpg"alt=""data-index="4"/>
  • class="btns">
  • class="skip active">
  • href=""class="prev"><
  • href=""class="next">>
  • Correcting teacher:天蓬老师天蓬老师

    Correction status:qualified

    Teacher's comments:写得非常棒
    Statement of this Website
    The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
    All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
    0 comments
    Author's latest blog post
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!