JavaScript初学习/之classList：动态设置元素类、dataset: 读写自定义属性、选项卡、一键换肤、图片轮播

1.classList：动态设置元素类、

CSS

.red{
        color: red;
}
.green{
    color: green;
}
.bgb{
    background-color: blue;
}
.bgy{
    background-color: yellow;
}

HTML

<p class="bgy">好好学习，天天向上</p>

JavaScript

const p=document.querySelector("p");
// classList:动态设置元素的类
// 添加类
p.classList.add("red");//将字体颜色修改为红色
// 移出类
p.classList.remove("red");//将字体颜色红色去掉
// 替换类
p.classList.replace("bgy","bgb");//将背景颜色由黄色改为蓝色
// 动态切换：有则删，无则加
p.classList.toggle("red");//如果字体为红色则去掉，如果字体不是红色则改为红色

---

2.dataset: 读写自定义属性

HTML
<p data-name="Jy" data-my-age="27">个人资料</p>

JavaScript

// dataset: 读写自定义属性，必须使用“data-”为前缀
const p=document.querySelector("p");
console.log(p.dataset.name);//Jy
console.log(p.dataset.myAge);//27

3.选项卡

CSS

* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        a {
          text-decoration: none;
          color: #555;
        }
        a:hover {
          text-decoration: underline;
          color: red;
        }
        li {
          list-style: none;
          line-height: 1.6em;
        }
        li:hover {
          cursor: default;
        }
        .tabs {
          width: 300px;
          height: 300px;
          margin: 30px;
          background-color: #e6e6e6;
          display: flex;
          flex-direction: column;
        }
        .tab {
          height: 36px;
          display: flex;
        }
        .tab li {
          flex: auto;
          text-align: center;
          line-height: 36px;
          background-color: #fff;
        }
        .tab li.active {
          background-color: #e6e6e6;
        }
        .tab li:hover {
          cursor: pointer;
        }
        /* 默认所有选项卡只有一个显示,其它隐藏 */
        .item {
          padding: 20px;
          display: none;
        }
        .item.active {
          display: block;
        }

HTML

<div class="tabs">
    <ul class="tab">
        <li class="active" data-index="1">国际</li>
        <li data-index="2">国内</li>
        <li data-index="3">省内</li>
    </ul>
    <ul class="item active" data-index="1">
       <li><a href="">国际新闻11</a></li>
       <li><a href="">国际新闻22</a></li>
       <li><a href="">国际新闻33</a></li>
    </ul>
    <ul class="item" data-index="2">
       <li><a href="">国内新闻111</a></li>
       <li><a href="">国内新闻222</a></li>
       <li><a href="">国内新闻333</a></li>
    </ul>
    <ul class="item" data-index="3">
       <li><a href="">省内新闻1111</a></li>
       <li><a href="">省内新闻2222</a></li>
       <li><a href="">省内新闻3333</a></li>
    </ul>
</div>

JavaScript

const tab=document.querySelector(".tab");
const items=document.querySelectorAll(".item");
// 给导航添加点击事件
tab.onclick=ev=>{
    //1.将之前所以激活的样式取消|children:获取所以子元素|遍历子元素将其激活的类去掉|Nodelist对象默认内置了forEach方法 [...tab.children].forEach(item=>item.classList.remove("active"));
    // 2.通过导航的事件触发者来设置类
    ev.target.classList.add("active");
    // 3.同样先移出列表激活的类
items.forEach(item=>item.classList.remove("active"));
    // 4.过滤列表组，通过对比事件触发者的data-index和列表的data-index进行比较，然后激活|数组过滤完也是数组，所以要设置数组的第一个元素
            [...items].filter(item=>item.dataset.index===ev.target.dataset.index)[0].classList.add("active");
}

---

4.一键换肤

CSS

.container{
            width: 300px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 10px;
        }
        .container>img{
            width: 100%;
            border: 3px solid #fff;
            opacity: 0.6;
        }
        .container .active{
            opacity: 1;
        }
        .container>img:hover{
            width: 105%;
            opacity: 1;
            cursor: pointer;
        }
        body{
            background: url("static/images/1.jpg") no-repeat;
            background-size: cover;
        }

HTML

<div class="container">
    <img src="/0111/static/images/1.jpg" class="active">
    <img src="/0111/static/images/2.jpg">
    <img src="/0111/static/images/3.jpg">
</div>

JavaScript

// 给图片组的父元素添加点击事件，将事件触发者的src属性设置给body的背景图
const container=document.querySelector(".container");
container.onclick=ev=>{
    document.body.style.backgroundImage="url("+ ev.target.src +")";
    //先将之前的激活状态取消
            [...container.children].forEach(item=>item.classList.remove("active"));
    //再将激活的缩略图选中
    ev.target.classList.add("active");
}

静态资源（图片）未上传

---

5.图片懒加载

html

<div class="container">
    <img src="images/temp.jpg" data-src="images/img-1.jpg">
    <img src="images/temp.jpg" data-src="images/img-2.jpg">
    <img src="images/temp.jpg" data-src="images/img-3.jpg">
    <img src="images/temp.jpg" data-src="images/img-4.jpg">
    <img src="images/temp.jpg" data-src="images/img-5.jpg">
    <img src="images/temp.jpg" data-src="images/img-6.jpg">
    <img src="images/temp.jpg" data-src="images/img-7.jpg">
    <img src="images/temp.jpg" data-src="images/img-8.jpg">
    <img src="images/temp.jpg" data-src="images/img-9.jpg">
</div>

JavaScript

// 获取视口高度
let clientHeight=document.documentElement.clientHeight;
const imgs=document.querySelectorAll(".container img");
//添加窗口滚动监听事件,达到触发条件则执行图片加载
window.addEventListener("scroll",layzyload);
// 设置页面加载后执行一次监听事件，以显示视口内图片
window.addEventListener("load",layzyload);
function layzyload(){
    // 获取滚动高度
    let scrollTop=document.documentElement.scrollTop;
    //遍历图片并判断图片是否进入可视区
    imgs.forEach(img=>{
    //图片距离顶部的距离小于视口高度加滚动高度，则进入可视区
    if(img.offsetTop<clientHeight+scrollTop){
            img.src=img.dataset.src;
        }
    })
}

静态资源（图片）未上传

---

6.图片轮播

CSS

/* 初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
/* 轮播图的容器 */
.container {
  width: 62.5em;
  height: 22em;
  margin: 1em auto;
  /* 转为定位元素/定位父级 */
  position: relative;
}
/* 图片组 */
.container > .imgs img {
  width: 100%;
  height: 100%;
  /* 默认全部隐藏 */
  display: none;
  /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  position: absolute;
  left: 0;
  top: 0;
}
/* 设置默认显示的图片(第一张) */
.container > .imgs img.active {
  display: block;
}
/* 按钮组(独立按钮) */
.container > .btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 水平居中 */
  text-align: center;
}
.container > .btns a {
  /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  display: inline-block;
  padding: 0.5em;
  margin: 0 0.2em;
  background-color: #fff;
  border-radius: 50%;
}
.container > .btns a.active {
  background-color: #000;
}
/* 翻页按钮 */
.container .skip a {
  position: absolute;
  width: 2.5rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  opacity: 0.3;
  top: 9rem;
  font-weight: lighter;
  font-size: 2rem;
  background-color: #ccc;
}
.container .skip .prev {
  left: 0;
}
.container .skip .next {
  right: 0;
}
.container .skip *:hover {
  opacity: 0.6;
  color: #666;
}

HTML

<div class="container">
     <!-- 1. 图片组 -->
     <nav class="imgs">
       <a href=""><img src="banner/banner1.jpg" data-index="1" class="active" /></a>
       <a href=""><img src="banner/banner2.jpg" data-index="2" /></a>
       <a href=""><img src="banner/banner3.jpg" data-index="3" /></a>
       <a href=""><img src="banner/banner4.jpg" data-index="4" /></a>
     </nav>
     <!-- 2. 图片小按钮 -->
     <nav class="btns"></nav>
     <!-- 3. 翻页 -->
     <nav class="skip">
       <a href="#" class="prev">&lt;</a>
       <a href="#" class="next">&gt;</a>
     </nav>
</div>

JavaScript

//   1.获取所有图片
const imgs=document.querySelectorAll(".container > .imgs img");
// 按钮组
const btnsGroup=document.querySelector(".container > .btns");
// 翻页按钮
const skips=document.querySelector(".container > .skip");
//创建出一组与图片数量一致的小按钮 ele：插入到什么地方；img:图片数量
function autoCreateBtns(ele,imgLength){
    // 通过文件碎片来完成
    const frag=document.createDocumentFragment();
    for(let i=0;i<imgLength;i++){
        const a=document.createElement("a");// 创建a标签
        a.href="#";
        a.dataset.index=i+1;//设置自定义属性
            if(i===0) a.classList.add("active");//如果是第一个则设置为选中状态
            frag.appendChild(a);//将文档碎片添加到页面中
        }
        ele.appendChild(frag);//添加到按钮组中
    }
    // 调用创建小按钮的函数
    autoCreateBtns(btnsGroup,imgs.length);
    //为刚刚生成的小按钮添加点击事件
    const btns=document.querySelectorAll(".container > .btns > *");
    //下面声明两个公共函数
    // 1.获取激活的元素
    function getActiveEle(eles){
        let active=[...eles].filter(img=>img.classList.contains("active"));//判断元素是否有active类
        return active.shift();//将激活的元素弹出
    }
    // 2.设置激活的元素,根据当前显示图片的索引进行激活
    function setActive(btnIndex){
        [imgs,btns].forEach(arr=>{
        //将之前的激活状态全部清空
        getActiveEle(arr).classList.remove("active");
            arr.forEach(item=>{
                if(item.dataset.index===btnIndex) item.classList.add("active");
            })
        })
    }
    //为每一个小按钮添加;点击事件     btns.forEach(btn=>btn.addEventListener("click",ev=>setActive(ev.target.dataset.index)));
    // 添加点击右面按钮向下翻页
    skips.addEventListener("click",ev=>{
        // 获取当前图片索引
        const currentIndex=parseInt(getActiveEle(imgs).dataset.index)
        //获取轮播图的数量
        const imgsLength=imgs.length;
        //判断点击哪个按钮，setActiveEle()函数里，判断条件用的(完全等于) ===，所以这里要用toString()，转成字符串
        if(ev.target.classList[0]==="prev"){
            // 点击上一个，则将索引-1，如果到了第一个，则将索引设置为最后一个
            setActive((currentIndex===1?imgsLength:currentIndex-1).toString());
        }else{
            // 点击下一个索引+1,如果到了第一个，则将索引设置为第一个
            setActive((currentIndex===imgsLength?1:currentIndex+1).toString());
        }
    });
    // 自动播放函数，鼠标移入停止播放,移出自动播放
    // 定义定时器
    let timer=null;
    // 页面加载后，启动自动播放函数
    autoMove();
    // 获取轮播图容器
    const container = document.querySelector(".container");
    //添加鼠标移出事件
    container.addEventListener("mouseout", autoMove); 
    //添加鼠标移入事件，清除定时器;
    container.addEventListener("mouseover", () => clearInterval(timer));
    // 自动播放轮播图函数，模拟点击next按钮
    function autoMove() {
         timer = setInterval(() => document.querySelector(".next").click(), 3000);
    }

静态资源（图片）未上传