search

博客列表 >简单实现选项卡、懒加载、轮播图案例

简单实现选项卡、懒加载、轮播图案例

咸鱼老爷
咸鱼老爷原创
2021年03月05日 13:29:45710浏览

选项卡

  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>

上一条：Composer常用指令以及自动加载器的使用方式下一条：误删的文件怎样找到
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多