search

博客列表 >JS学习小结（选项卡实现、轮播图实现完整版）

JS学习小结（选项卡实现、轮播图实现完整版）

庖丁
庖丁原创
2021年01月25日 14:15:36557浏览

1.选项卡

选项卡需要用到一个classList属性，通过该属性加方法的方式，来增、删、改元素的css样式。

classList.add() 增加样式
classList.remove() 删除样式
classList.replace()替换样式

选项卡还会用到自定义属性

比如，class=”data-index”，以data-自定义属性名 的方式命名，
读取自定义属性需要用到 dataset.自定义属性名
示例代码如下

  1. <div class=".box">
  2.     <ul class="tab">
  3.         <li data-index="1" class="active">html教程</li>
  4.         <li data-index="2">JS小结</li>
  5.         <li data-index="3">php代码</li>
  6.     </ul>
  7.     <ul data-index="1" class="item active">
  8.         <li>html教程1</li>
  9.         <li>html教程2</li>
  10.         <li>html教程3</li>
  11.     </ul>
  12.     <ul data-index="2" class="item">
  13.         <li>JS小结1</li>
  14.         <li>JS小结1</li>
  15.         <li>JS小结1</li>
  16.     </ul>
  17.     <ul data-index="3" class="item">
  18.         <li>php代码1</li>
  19.         <li>php代码1</li>
  20.         <li>php代码1</li>
  21.     </ul>
  22. </div>
  23.     <script>
  24.         const tab = document.querySelector(".tab");
  25.         const item = document.querySelectorAll('.item');
  26.         console.log(item);
  27.         tab.onclick = (ev)=>{
  28.             [...tab.children].forEach(item=>
  29.                 item.classList.remove('active'));
  30.             ev.target.classList.add('active');
  31.             item.forEach(item=>item.classList.remove("active"));
  32.             [...item].filter(item=>item.dataset.index === ev.target.dataset.index)[0].classList.add('active');
  33.         };
  34.     </script>

2.轮播图（补全版）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <link rel="stylesheet" href="banner/style.css" />
  9. </head>
  11. <body>
  12.     <div class="container">
  13.         <!-- 1. 图片组 -->
  14.         <nav class="imgs">
  15.             <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
  16.             <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  17.             <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  18.             <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  19.         </nav>
  20.         <!-- 2. 图片小按钮 -->
  21.         <nav class="btns">
  22.             <!-- 这些小按钮应该根据图片数量自动生成 -->
  23.             <!-- <a href="" data-index="1" class="active"></a>
  24.         <a href="" data-index="2"></a>
  25.         <a href="" data-index="3"></a>
  26.         <a href="" data-index="4"></a> -->
  27.         </nav>
  28.         <!-- 3. 翻页 -->
  29.         <nav class="skip">
  30.             <a href="#" class="prev">&lt;</a>
  31.             <a href="#" class="next">&gt;</a>
  32.         </nav>
  33.     </div>
  35.     <script>
  36.         // 所有图片
  37.         const imgs = document.querySelectorAll(".container > .imgs img");
  38.         // 按钮组
  39.         const btnGroup = document.querySelector(".container > .btns");
  40.         // 翻页按钮
  41.         const skip = document.querySelector(".container > .skip");
  43.         // 创建出一组与图片数量对应的小按钮
  44.         function autoCreateBtns(ele, imgLength) {
  45.             const frag = document.createDocumentFragment();
  46.             for (let i = 0; i < imgLength; i++) {
  47.                 const a = document.createElement("a");
  48.                 a.href = "#";
  49.                 a.dataset.index = i + 1;
  50.                 if (i === 0) a.classList.add("active");
  51.                 frag.appendChild(a);
  52.             }
  53.             ele.appendChild(frag);
  54.         }
  55.         // 调用创建小按钮的函数
  56.         autoCreateBtns(btnGroup, imgs.length);
  58.         // 为刚刚生成的小按钮们添加点击事件
  59.         const btns = document.querySelectorAll(".container > .btns > *");
  61.         // 下面声明二个公共函数
  62.         // 1. 获取激活的元素
  63.         function getActiveEle(eles) {
  64.             let activities = [...eles].filter(img => img.classList.contains("active"));
  65.             return activities.shift();
  66.         }
  67.         // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
  68.         function setActiveEle(btnIndex) {
  69.             [imgs, btns].forEach(arr => {
  70.                 // 将之前的状态全部重置到初始化(清空)
  71.                 getActiveEle(arr).classList.remove("active");
  72.                 arr.forEach(item => {
  73.                     if (item.dataset.index === btnIndex) {
  74.                         item.classList.add("active");
  75.                     }
  76.                 });
  77.             });
  78.         }
  80.         // 为每一个小按钮添加事件
  81.         btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));
  83.         //   1. 为翻页按钮添加功能
  84.         //   1.1 获取当前激活元素的上一个元素自定义属性序号
  85.         function prevActiveEle(eles) {
  86.             let indexNumber = getActiveEle(eles).dataset.index;
  87.             if (indexNumber == 1) {
  88.                 return String(eles.length);
  89.             } else {
  90.                 return String(indexNumber - 1);
  91.             }
  92.         }
  93.         //   1.2 获取当前激活元素的下一个元素自定义属性序号
  94.         function nextActiveEle(eles) {
  95.             let indexNumber = getActiveEle(eles).dataset.index;
  96.             if (indexNumber == eles.length) {
  97.                 return 1 + "";
  98.             } else {
  99.                 return String(Number(indexNumber) + 1);
  100.             }
  101.         }
  102.         //   1.3 为上翻页按钮添加点击事件        
  103.         skip.children[0].addEventListener('click',()=>setActiveEle(prevActiveEle(imgs)));
  104.         //   1.4 为下翻页按钮添加点击事件        
  105.         skip.children[1].onclick =()=>setActiveEle(nextActiveEle(imgs));
  106.         //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
  107.         //   2.1 创建派发事件 
  108.         const evclick = new Event('click'); 
  109.         //   2.2 使用间歇式定时器，给下翻页按钮添加事件派发,间隔2秒
  110.         let timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);
  111.         //   2.3 获取图片组的父元素
  112.         const imgsBox = document.querySelector(".container");
  113.         //   2.4 当鼠标移入时自动停止播放
  114.         imgsBox.onmouseover=()=>clearInterval(timer);
  115.         //   2.5 当鼠标移除时继续自动播放
  116.         imgsBox.onmouseout=()=>timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);
  118.     </script>
  119. </body>
  121. </html>
上一条：如何解决Redis雪崩、穿透、并发等问题下一条：第20章 0112-jQuery编程基础1，学习心得、笔记($(): 参数的四种类型，常用的getter/setter方法: attr(),css(),val(),html(),text()...)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多