Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单实现选项卡、懒加载、轮播图案例
Blogger Information
Blog 45
fans 0
comment 0
visits 34626
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单实现选项卡、懒加载、轮播图案例
咸鱼老爷
Original
712 people have browsed it

选项卡

  1. <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         li {
  9.             list-style: none;
  10.         }
  12.         .tabs {
  13.             width: 10em;
  14.             margin: 0 auto;
  15.         }
  17.         .tabs ul.tab {
  18.             display: flex;
  19.             height: 2em;
  20.             background-color: #fff;
  21.         }
  23.         .tabs ul.tab li {
  24.             flex: auto;
  25.             text-align: center;
  26.             line-height: 2em;
  27.         }
  29.         .tabs .item {
  30.             background-color: slategrey;
  31.             display: none;
  32.         }
  34.         .tab li.active {
  35.             background-color: slategrey;
  36.         }
  38.         .item.active {
  39.             display: block;
  40.         }
  41.     </style>
  42.      <div class="tabs">
  43.         <ul class="tab">
  44.             <li data-index="1" class="active">省内</li>
  45.             <li data-index="2">国内</li>
  46.             <li data-index="3">国际</li>
  47.         </ul>
  48.         <ul data-index="1" class="item active">
  49.             <li>这是省内</li>
  50.             <li>这是省内</li>
  51.             <li>这是省内</li>
  52.             <li>这是省内</li>
  53.         </ul>
  54.         <ul data-index="2" class="item">
  55.             <li>这是国内</li>
  56.             <li>这是国内</li>
  57.             <li>这是国内</li>
  58.         </ul>
  59.         <ul data-index="3" class="item">
  60.             <li>这是国际</li>
  61.             <li>这是国际</li>
  62.             <li>这是国际</li>
  63.         </ul>
  64.     </div>
  65.     <script>
  66.     const tab = document.querySelector('.tab');
  67.     const items = document.querySelectorAll('.item');
  68.     tab.onclick = (ev) => {
  69.         //事件绑定对象 ev.currentTarget
  70.         //事件触发对象 ev.target
  71.         //1 情况之前所有处于激活状态的选项卡,并将当前点击对象激活
  72.         [...tab.children].forEach(item => item.classList.remove('active'));
  73.         ev.target.classList.add('active');
  74.         //2 根据自定义属性data-index找到对应的列表并显示出来
  75.         items.forEach(item => item.classList.remove('active'));
  76.         [...items].filter(item => item.dataset.index === ev.target.dataset.index)[0].classList.add('active');
  77.     }
  78. </script>

切换背景图

  1.   .container {
  2.             display: grid;
  3.             grid-template-columns: repeat(3, 2em);
  4.             gap: .2em;
  5.         }
  7.         .container img {
  8.             width: 100%;
  9.             border: 1px solid #ddd;
  10.         }
  12.         body {
  13.             background-image: url(1.jpg)
  14.         }
  15.         <body>
  16.     <div class="container">
  17.         <img src="1.jpg" alt="">
  18.         <img src="2.png" alt="">
  19.         <img src="3.png" alt="">
  20.     </div>
  21. </body>
  22. <script>
  23.     const container = document.querySelector('.container');
  24.     container.onclick = (ev) => {
  25.         document.body.style.backgroundImage = "url(" + ev.target.src + ")";
  26.     }
  27. </script>

简单实现懒加载

  1. <body>
  2.     <!-- //当要显示的图片进入到窗口的可视区时，使用data-src的值将src替换 -->
  3.     <img src="1.jpg" alt="" data-src="1.jpg">
  4.     <img src="1.jpg" alt="" data-src="2.png">
  5.     <img src="1.jpg" alt="" data-src="3.png">
  6. </body>
  7. <script>
  8.     // //视口高度
  9.     // let viewHeight = document.documentElement.clientHeight;
  11.     // //滚动高度
  12.     // let scrollTop = document.documentElement.scrollTop;
  13.     // window.onscroll = ev => console.log(document.documentElement.scrollTop);
  14.     // const img = document.querySelector('img');
  15.     // window.onscroll = ev => img.src = img.dataset.src;
  16.     const imgs = document.querySelectorAll('img');
  17.     const clientHeight = document.documentElement.clientHeight;
  18.     window.addEventListener('scroll', layzyload);
  19.     //首次加载自动执行
  20.     window.addEventListener('load', layzyload)
  22.     function layzyload() {
  23.         //滚动高度
  24.         let scrollTop = document.documentElement.scrollTop;
  25.         //遍历图片并判断是否进入可是区
  26.         imgs.forEach(img => {
  27.             //只要当前图片距离文档顶部的偏移量小于可视区高度与滚动高度之间的距离则表示进入可视区
  28.             if (img.offsetTop < clientHeight + scrollTop) {
  29.                 img.src = img.dataset.src;
  30.             }
  31.         })
  33.     }
  34. </script>

简单实现轮播图案例

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         li {
  9.             list-style: none;
  10.         }
  12.         a {
  13.             text-decoration: none;
  14.         }
  16.         ul.imgs {
  17.             width: 1000px;
  18.             margin: 0 auto;
  19.         }
  21.         ul.imgs .active {
  22.             display: block;
  23.         }
  25.         ul.imgs li img {
  26.             width: 100%;
  27.             display: none;
  28.         }
  30.         .container {
  31.             position: relative;
  32.             margin: 0 auto;
  33.         }
  35.         div.btns {
  36.             width: 140px;
  37.             position: absolute;
  38.             bottom: 120px;
  39.             left: 50%;
  40.             margin-left: -70px;
  41.             display: flex;
  42.             justify-content: space-evenly;
  43.         }
  45.         div.btns a {
  46.             display: flex;
  47.             width: 30px;
  48.             height: 30px;
  49.             border-radius: 50%;
  50.             background-color: #fff;
  51.         }
  53.         div.btns a.active {
  54.             background-color: sienna;
  55.         }
  57.         .prev,
  58.         .next {
  59.             position: absolute;
  60.             height: 50px;
  61.             width: 50px;
  62.             top: 50%;
  63.             margin-top: -25px;
  64.             margin-left: -75px;
  65.             text-align: center;
  66.             line-height: 50px;
  67.         }
  69.         .prev {
  70.             left: 25%;
  71.         }
  73.         .next {
  74.             right: 25%;
  75.             margin-right: -75px;
  76.         }
  77.     </style>
  78.     <body>
  79.     <div class="container">
  80.         <ul class="imgs">
  81.             <li>
  82.                 <a href=""><img src="1.jpg" alt="" data-index="1" class="active"></a>
  83.             </li>
  84.             <li>
  85.                 <a href=""><img src="2.png" alt="" data-index="2"></a>
  86.             </li>
  87.             <li>
  88.                 <a href=""><img src="3.png" alt="" data-index="3"></a>
  89.             </li>
  90.             <li>
  91.                 <a href=""><img src="2.png" alt="" data-index="4"></a>
  92.             </li>
  93.         </ul>
  94.         <div class="btns">
  97.         </div>
  98.         <a href="javascript:;" class="next">&gt;</a>
  99.         <a href="javascript:;" class="prev">&lt;</a>
  100.     </div>
  101. </body>
  102. <script>
  103.     //所有图
  104.     const imgs = document.querySelectorAll('.container .imgs img');
  105.     //小圆圈
  106.     const btnsGroup = document.querySelector('.container .btns');
  107.     //上一个
  108.     document.querySelector('.next').addEventListener('click', () => {
  110.             let imgIndex = parseInt(getActiveEle(imgs).dataset.index);
  111.             setActiveEle((imgIndex === imgs.length ? 1 : imgIndex + 1).toString());
  112.         })
  113.         //下一个
  114.     document.querySelector('.prev').addEventListener('click', () => {
  115.             let imgIndex = parseInt(getActiveEle(imgs).dataset.index);
  116.             setActiveEle((imgIndex === 1 ? imgs.length : imgIndex - 1).toString());
  117.         })
  118.         //1创建一组与图片数量对应的小按钮
  119.     function autoCreateBtns(ele, imgLength) {
  120.         // 创建一个虚拟的节点对象
  121.         const frag = document.createDocumentFragment();
  122.         //创建对应的
  123.         for (let i = 0; i < imgLength; i++) {
  124.             const a = document.createElement('a');
  125.             a.href = 'javascript:;';
  126.             a.dataset.index = i + 1;
  127.             if (i === 0) a.classList.add('active');
  128.             frag.appendChild(a);
  129.         }
  130.         ele.appendChild(frag);
  131.     }
  132.     autoCreateBtns(btnsGroup, imgs.length);
  133.     //所有小圆圈
  134.     const btns = document.querySelectorAll('.btns > *')
  135.         //获取激活的元素
  136.     function getActiveEle(eles) {
  137.         let actives = [...eles].filter(img => img.classList.contains('active'));
  138.         return actives.shift();
  139.     }
  140.     //设置激活的元素,根据按钮索引更新正则显示的图片
  141.     function setActiveEle(btnIndex) {
  142.         [imgs, btns].forEach(arr => {
  143.             getActiveEle(arr).classList.remove('active');
  144.             arr.forEach(item => {
  145.                 if (item.dataset.index === btnIndex) {
  146.                     item.classList.add('active');
  147.                 }
  148.             })
  149.         })
  150.     }
  151.     //为每一个小圆圈添加事件
  152.     btns.forEach(btn => btn.addEventListener('click', ev => setActiveEle(ev.target.dataset.index)));
  153.     //自动播放
  154.     let timer = '';
  155.     autoMove();
  156.     function autoMove() {
  157.         timer = setInterval(() => {
  158.             document.querySelector('.prev').click()
  159.         }, 2000)
  160.     }
  161.     const move = document.querySelector('.container');
  162.     move.addEventListener('mouseout', () => autoMove());
  163.     move.addEventListener('mouseover', () => clearInterval(timer));
  164. </script>

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 with News Comment Service Agreement
0 comments
Author's latest blog post