search

博客列表 >轮播案例实操

轮播案例实操

P粉116103988
P粉116103988原创
2022年08月16日 11:45:41315浏览

轮播案例：

1. 将所有图片放在一个数组中, 并动态添加到页面中

2. 根据图片数量,动态创建按钮组,并动态添加到页面中

3. 在页面初始化时,自动加载以上内容,事件是 load

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>轮播</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  15.         }
  17.         a {
  18.             color: #000;
  19.             text-decoration: none;
  20.         }
  22.         li {
  23.             list-style: none;
  24.         }
  26.         .lb {
  28.             width: 50em;
  29.             height: 20em;
  30.             margin: auto;
  31.             margin-top: 1em;
  32.         }
  34.         .lb .imgs img {
  35.             width: 100%;
  36.             display: none;
  37.         }
  39.         .lb .imgs .active {
  40.             display: block;
  41.         }
  43.         .lb .btns {
  44.             display: flex;
  45.             place-content: center;
  46.         }
  48.         .lb .btns span {
  49.             width: 1em;
  50.             height: 1em;
  51.             background-color: #000;
  52.             border-radius: 50%;
  53.             margin: -18px 5px 5px;
  54.         }
  56.         .lb .btns span.active {
  57.             background-color: red;
  58.         }
  59.     </style>
  60. </head>
  62. <body>
  63.     <div class="lb">
  64.         <div class="imgs">
  65.             <a href=""><img src="./images/banner-1.jpg" alt="" data-index="1" class="active"></a>
  66.             <a href=""><img src="./images/banner-2.jpg" alt="" data-index="2"></a>
  67.             <a href=""><img src="./images/banner-3.jpg" alt="" data-index="3"></a>
  68.             <a href=""><img src="./images/banner-4.jpg" alt="" data-index="4"></a>
  70.         </div>
  71.         <div class="btns">
  72.             <span data-index="1" class="active" onclick="setActive()"></span>
  73.             <span data-index="2" onclick="setActive()"></span>
  74.             <span data-index="3" onclick="setActive()"></span>
  75.             <span data-index="4" onclick="setActive()"></span>
  76.         </div>
  77.     </div>
  78.     <script>
  79.         // 获取所有的图片合按钮 
  80.         let imgs = document.querySelectorAll('.lb .imgs img');
  81.         let btns = document.querySelectorAll('.lb .btns span');
  82.         // console.log(imgs);
  83.         // console.log(btns);
  85.         // 激活状态: 
  87.         function setActive() {
  88.             // 清空所有图片和按钮的状态 
  89.             imgs.forEach(img => img.classList.remove('active'));
  90.             btns.forEach(btn => btn.classList.remove('active'));
  92.             // 根据自定义属性绑定按钮并添加状态
  93.             event.target.classList.add('active');
  94.             imgs.forEach(img => {
  95.                 if (img.dataset.index === event.target.dataset.index) {
  96.                     img.classList.add('active');
  97.                 }
  98.             });
  99.         }
  100.         // 定时器: setInterval()
  101.         setInterval(
  102.             function (arr) {
  103.                 let index = arr.shift();
  104.                 // console.log(arr);
  105.                 //事件派发器:dispatchEvent()
  106.                 btns[index].dispatchEvent(new Event('click'));
  107.                 arr.push(index);
  108.             },
  109.             2000,
  110.             Object.keys(btns)
  111.         );
  113.     </script>
  114. </body>
  116. </html>

效果图：

5. 仿写php中文网编程词典选项卡

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  10. <style>
  11.     * {
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.     }
  17.     a {
  18.         color: #000;
  19.         text-decoration: none;
  20.     }
  22.     li {
  23.         list-style: none;
  24.     }
  26.     .box {
  27.         /* background-color: lightcyan; */
  28.         width: 20em;
  29.         /* height: 20em; */
  30.         margin: 2em auto;
  31.         border: 1px solid #000;
  32.         /* padding: 1em; */
  33.     }
  35.     .box nav {
  36.         height: 2em;
  37.         display: grid;
  38.         grid-template-columns: repeat(3, 1fr);
  39.         /* place-content: center; */
  40.         text-align: center;
  41.         line-height: 2em;
  42.         /* background-color: aquamarine; */
  44.     }
  46.     .box nav a.active {
  47.         background-color: lightcoral;
  48.         color: aliceblue;
  50.     }
  52.     .box .list {
  53.         padding: 1em;
  54.         display: none;
  55.     }
  57.     .box .active {
  58.         display: block;
  59.     }
  60. </style>
  62. <body>
  63.     <div class="box">
  64.         <!-- 标签 -->
  65.         <nav class="nr">
  66.             <a href="" class="active" data-index="1">TEXT</a>
  67.             <a href="" data-index="2">item</a>
  68.             <a href="" data-index="3">text</a>
  69.         </nav>
  70.         <!-- 内容区 -->
  71.         <ul class="list active" data-index="1">
  72.             <li>
  73.                 <a href="">TEXT1</a>
  74.                 <a href="">TEXT2</a>
  75.                 <a href="">TEXT3</a>
  76.                 <a href="">TEXT4</a>
  77.                 <a href="">TEXT5</a>
  78.             </li>
  79.         </ul>
  80.         <ul class="list" data-index="2">
  81.             <li>
  82.                 <a href="">item1</a>
  83.                 <a href="">item2</a>
  84.                 <a href="">item3</a>
  85.                 <a href="">item4</a>
  86.                 <a href="">item5</a>
  87.             </li>
  88.         </ul>
  89.         <ul class="list" data-index="3">
  90.             <li>
  91.                 <a href="">text1</a>
  92.                 <a href="">text2</a>
  93.                 <a href="">text3</a>
  94.                 <a href="">text4</a>
  95.                 <a href="">text5</a>
  96.             </li>
  97.         </ul>
  98.     </div>
  99.     <script>
  100.         let menu = document.querySelector('.nr');
  101.         menu.addEventListener('click', show, false);
  102.         menu.addEventListener('mouseover', show, false);
  103.         function show() {
  104.             event.preventDefault();
  105.             let btns = [...event.currentTarget.children];
  106.             let lists = document.querySelectorAll('.list');
  107.             // console.log(lists);
  108.             btns.forEach(item => item.classList.remove('active'));
  109.             event.target.classList.add('active');
  110.             lists.forEach(item => item.classList.remove('active'));
  111.             // lists.forEach(list => {
  112.             //     if (list.dataset.index === event.target.dataset.index) {
  113.             //         lists.classList.add('active');
  114.             //     }
  115.             // }
  116.             // )
  117.             [...lists].find(list => list.dataset.index === event.target.dataset.index).classList.add('active');
  118.         }
  119.     </script>
  120. </body>
  122. </html>

效果图：

上一条：PHP类的继承/抽象类的实现/命名空间下一条：浅析智能化指挥信息系统发展
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多