幻灯片完善：为翻页按钮添加功能 , 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放，选项卡, 懒加载二选一

1. 为翻页按钮添加功能

2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放

第一版：通过变量控制：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="banner/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- 1. 图片组 -->
      <nav class="imgs">
        <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
        <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
        <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
        <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
      </nav>
      <!-- 2. 图片小按钮 -->
      <nav class="btns">
        <!-- 这些小按钮应该根据图片数量自动生成 -->
        <!-- <a href="" data-index="1" class="active"></a>
        <a href="" data-index="2"></a>
        <a href="" data-index="3"></a>
        <a href="" data-index="4"></a> -->
      </nav>
      <!-- 3. 翻页 -->
      <nav class="skip">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
      </nav>
    </div>
    <script>
      // 所有图片
      const imgs = document.querySelectorAll(".container > .imgs img");
      // 按钮组
      const btnGroup = document.querySelector(".container > .btns");
      // 翻页按钮
      const skip = document.querySelector(".container > .skip");
      // 创建出一组与图片数量对应的小按钮
      function autoCreateBtns(ele, imgLength) {
        const frag = document.createDocumentFragment();
        for (let i = 0; i < imgLength; i++) {
          const a = document.createElement("a");
          a.href = "#";
          a.dataset.index = i + 1;
          if (i === 0) a.classList.add("active");
          frag.appendChild(a);
        }
        ele.appendChild(frag);
      }
      // 调用创建小按钮的函数
      autoCreateBtns(btnGroup, imgs.length);
      // 为刚刚生成的小按钮们添加点击事件
      const btns = document.querySelectorAll(".container > .btns > *");
      // 下面声明二个公共函数
      // 1. 获取激活的元素
      function getActiveEle(eles) {
        let activities = [...eles].filter(img => img.classList.contains("active"));
        return activities.shift();
      }
      let  playNum=1;
      // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
      function setActiveEle(btnIndex) {
        btnIndex=(String)(btnIndex>imgs.length?"1": btnIndex);
        btnIndex=(String)(btnIndex<=0?imgs.length: btnIndex);
        playNum=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 => setActiveEle(ev.target.dataset.index)));
      //   作业:
      //   1. 为翻页按钮添加功能
      //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
      //   3. 上节课的选项卡, 懒加载二选一
    // 按时间自动切换:
      function    autoPlay(){
        setActiveEle(++playNum);
      }
     let  setId=setInterval(autoPlay,2000);
     const container = document.querySelector(".container");
     container.addEventListener('mousemove',()=>clearInterval(setId));
     container.addEventListener('mouseleave',()=>setId=setInterval(autoPlay,2000));
     //左右切换
     const skipLift = document.querySelector(".skip > .prev");
     const skipRight = document.querySelector(".skip > .next");
     skipLift.addEventListener('click',()=>setActiveEle(--playNum));
     skipRight.addEventListener('click',()=>setActiveEle(++playNum));
    </script>
  </body>
</html>

第二版:
事件派发版本：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="banner/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- 1. 图片组 -->
      <nav class="imgs">
        <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
        <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
        <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
        <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
      </nav>
      <!-- 2. 图片小按钮 -->
      <nav class="btns">
        <!-- 这些小按钮应该根据图片数量自动生成 -->
        <!-- <a href="" data-index="1" class="active"></a>
        <a href="" data-index="2"></a>
        <a href="" data-index="3"></a>
        <a href="" data-index="4"></a> -->
      </nav>
      <!-- 3. 翻页 -->
      <nav class="skip">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
      </nav>
    </div>
    <script>
      // 所有图片
      const imgs = document.querySelectorAll(".container > .imgs img");
      // 按钮组
      const btnGroup = document.querySelector(".container > .btns");
      // 翻页按钮
      const skip = document.querySelector(".container > .skip");
      // 创建出一组与图片数量对应的小按钮
      function autoCreateBtns(ele, imgLength) {
        const frag = document.createDocumentFragment();
        for (let i = 0; i < imgLength; i++) {
          const a = document.createElement("a");
          a.href = "#";
          a.dataset.index = i + 1;
          if (i === 0) a.classList.add("active");
          frag.appendChild(a);
        }
        ele.appendChild(frag);
      }
      // 调用创建小按钮的函数
      autoCreateBtns(btnGroup, imgs.length);
      // 为刚刚生成的小按钮们添加点击事件
      const btns = document.querySelectorAll(".container > .btns > *");
      // 下面声明二个公共函数
      // 1. 获取激活的元素
      function getActiveEle(eles) {
        let activities = [...eles].filter(img => img.classList.contains("active"));
        return activities.shift();
      }
      // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
      function setActiveEle(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 => setActiveEle(ev.target.dataset.index)));
      //   作业:
      //   1. 为翻页按钮添加功能
      //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
      //   3. 上节课的选项卡, 懒加载二选一
      //通过实践盘发来实现切交换:
      let  currId=0;
      const  ev=new Event('click');
      let  setId=setInterval("autoPlay(currId++)",2000);
      function    autoPlay(runId){
        runId=runId>=(imgs.length)?0:runId;
        runId=runId<0?(imgs.length-1):runId;
        currId=runId;
        btns[runId].dispatchEvent(ev);
      }  
     const container = document.querySelector(".container");
     container.addEventListener('mousemove',()=>clearInterval(setId));
     container.addEventListener('mouseleave',()=>setId=setInterval("autoPlay(++currId);",2000));
     //左右切换
     const skipLift = document.querySelector(".skip > .prev");
     const skipRight = document.querySelector(".skip > .next");
     skipLift.addEventListener('click',()=>autoPlay(--currId));
     skipRight.addEventListener('click',()=>autoPlay(++currId));
    </script>
  </body>
</html>

效果图：

选项卡

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style  type="text/css">
*{
margin:0;
padding: 0;
border:0;
box-sizing: border-box;
}
.container{
    width:300px;
    margin:0  auto;
    overflow: hidden;
}
.container  ul:nth-of-type(1){
    font-size: 16px;
    text-align: center;
    line-height: 35px;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr  1fr;
    overflow: hidden;
}
.container  ul:nth-of-type(1)  li{
float:left;
background-color:coral;
}
.container  ul:nth-of-type(1)  li a{
    text-decoration: none;
    color:#333;
}
.container  ul:nth-of-type(1)  li.active{
    background-color:gray;
}
.container  ul.item{
    font-size: 14px;
    text-align: left;
    line-height: 28px;
    list-style: none;
    overflow: hidden; 
    background-color: gray;
    text-indent: 12px;
    display: none;
}
.container  ul.active{
    display:block;
}
</style>
</head>
<body>
    <div  class="container">
    <ul><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="">特朗谱下台特朗谱下台特朗谱下台</a></li>
        <li><a   href="">特朗谱下台特朗谱下台特朗谱下台</a></li>
        <li><a   href="">特朗谱下台特朗谱下台特朗谱下台</a></li>
        <li><a   href="">特朗谱下台特朗谱下台特朗谱下台</a></li>
    </ul>
    <ul   class="item"  data-index="2">
        <li><a   href="">石家庄疫情严重</a></li>
        <li><a   href="">全国各地疫情蔓延中</a></li>
        <li><a   href="">武汉援助石家庄</a></li>
        <li><a   href="">疫情源头系冷链产品</a></li>
    </ul>
    <ul   class="item"  data-index="3">
        <li><a   href="">真正的明星终于上台了</a></li>
        <li><a   href="">是金子总要发光的</a></li>
        <li><a   href="">杨丽颖要分手黄晓明拒绝</a></li>
        <li><a   href="">李克勤周深同台</a></li>
    </ul>
   </div>
<script>
    const  topSelectParent=document.querySelector(".container > ul:nth-of-type(1)");
    const  topSelect=document.querySelectorAll(".container > ul:nth-of-type(1) li");
    const  selectItem=document.querySelectorAll(".container > ul.item");
      topSelectParent.addEventListener('click',function(ev){
    let  index=ev.target.dataset.index;
    let   topSelectRand=[...topSelect];
    let   topObj=ev.target;
         selectItem.forEach(arr=>{
            arr.classList.remove('active');
            topSelectRand.shift().classList.remove('active');
            if(arr.dataset.index==index){
                arr.classList.add('active');
            }
         })
         topObj.classList.add('active');   
    });
</script>
</body>
</html>

效果图：

1. 为翻页按钮添加功能

2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放

选项卡

相关文章