原生dom轮播图

J-Henry52

已于 2022-05-07 17:36:43 修改

阅读量100

点赞数

文章标签： css3 前端 css javascript

于 2022-05-07 17:08:08 首次发布

本文链接：https://blog.csdn.net/qq_43124006/article/details/124634908

版权

本文展示了如何使用HTML和CSS创建一个具备自动播放、鼠标悬停暂停/切换、导航按钮以及指示器功能的轮播图。通过CSS实现图片淡入淡出效果，并利用JavaScript进行事件监听和图片切换控制，为用户提供丰富的交互体验。

摘要由CSDN通过智能技术生成

轮播图的功能

1.大图和小图自动播放有定时器

2.鼠标移入小图时大图跟着变化

3.鼠标移入小图自动播放停止

4.鼠标移走自动播放开始

5.按钮切换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐轮播图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .main {
      width: 700px;
      margin: auto;
      background: #000;
    }

    .slides {
      height: 320px;
      position: relative;
    }

    .slides ul li {
      /* display: none; */
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      /* 这里实现淡入淡出的关键 */
      transition: all .3s;
    }


    .slides li.active {
      /* display: block; */
      opacity: 1;
    }

    .slides .extra {
      width: 700px;
      height: 53px;
      line-height: 53px;
      position: absolute;
      bottom: 0px;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 10;
    }

    .slides .extra h3 {
      width: 82%;
      margin: 0;
      margin-right: 20px;
      padding-left: 20px;
      color: #98E404;
      font-size: 28px;
      float: left;
      font-weight: 500;
      font-family: "Microsoft Yahei", Tahoma, Geneva;
    }

    .slides .extra a {
      width: 30px;
      height: 29px;
      display: block;
      float: left;
      margin-top: 12px;
      margin-right: 3px;
      background-image: url(./assets/icon_focus_switch.png);
    }

    .slides .extra .prev {
      background-position: 0 0;
    }

    .slides .extra .prev:hover {
      background-position: -30px 0;
    }

    .slides .extra .next {
      background-position: -60px 0;
    }

    .slides .extra .next:hover {
      background-position: -90px 0;
    }

    .indicator {
      padding: 10px 0;
    }

    .indicator ul {
      list-style-type: none;
      margin: 0 0 0 4px;
      padding: 0;
      overflow: hidden;
    }

    .indicator ul li {
      position: relative;
      float: left;
      width: 60px;
      margin: 0 4px 0 5px;
      text-align: center;

      cursor: pointer;
    }

    .indicator li img {
      display: block;
      border: 0;
      text-align: center;
      width: 60px;
    }

    .indicator li .mask {
      width: 60px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .indicator li .border {
      display: none;
      width: 54px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 20;
      border: 3px solid #98E404;
    }

    /* li里面的mask 和 border 刚开始都是显示的 */
    /* 我们写一个样式css */
    .indicator .active .mask {
      display: none;
    }

    .indicator .active .border {
      display: block;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="slides">
      <ul>
        <li class="active"><a href="#"><img src="./assets/b_01.jpg" alt="第1张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_02.jpg" alt="第2张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_03.jpg" alt="第3张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_04.jpg" alt="第4张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_05.jpg" alt="第5张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_06.jpg" alt="第6张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_07.jpg" alt="第7张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_08.jpg" alt="第8张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_09.jpg" alt="第9张图的描述信息"></a></li>
        <li><a href="#"><img src="./assets/b_10.jpg" alt="第9张图的描述信息"></a></li>
      </ul>

      <div class="extra">
        <h3>第1张图的描述信息</h3>
        <a class="prev" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
      </div>
    </div>
    <div class="indicator">
      <ul>
        <li class="active">
          <img src="assets/s_01.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_02.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_03.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_04.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_05.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_06.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_07.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_08.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_09.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_10.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
      </ul>
    </div>
  </div>
  <script>
    // ***** 轮播图开发技巧: 先做右箭头
    // 1.定时器     setinterval（）
    // 2封装一个 图片变换的函数    function play(){}
    // 2.给小图片添加    mouseenter-->遍历每一个小图
    // 3.改变图片的路径
    // 4.前进后退

    let bigLi = document.querySelectorAll(".slides li")
    let h3 = document.querySelector('.extra h3')
   
     

    
// 一 .封装的自动播放函数    排查函数 大图变换
function play(current) {
        // 该函数是用来换图片的
        // console.log("不断的换图片");
        // 通过排它思想将所有的大 li 的类名 active 移除
        // 然后只给某一个大 li 添加 active 类名
        // 所有的都移除 active 类名
         h3.innerHTML = `第${key + 1}张图的描述信息`
        // 给大图的所有li 遍历  （排他思想
        for (let t = 0; t < bigLi.length; t++) {
          bigLi[t].classList.remove("active");
        }
        // 只给某一个添加类名 active?
        // console.log(current);
        bigLi[current].classList.add("active");


         // 给小图的所有li 遍历  （排他思想
        // 小图要跟着换
        // 通过排它思想将小 li 的 active 类名全部清掉
        for (let j = 0; j < smallLi.length; j++) {
          smallLi[j].classList.remove("active");
        }
        // 给当前鼠标所在的小 li 添加 active 类名
        smallLi[current].classList.add("active");
      }

// 三.鼠标移入每一个小图事件 mouseeter 1 换图片 小图 变换
    //  2大图和小图的变换停止
    let smallLi = document.querySelectorAll(".indicator li")
  
     
    for (let i = 0; i < smallLi.length; i++) {
      smallLi[i].addEventListener("mouseenter", function () {
        // 暂停定时器
       clearInterval(timer)
        // 需要传参
         play(i)
      })
      smallLi[i].addEventListener("mouseleave",function(){
        autoPlay()
     })
    
    }
   
    // setInterval(play,1000)
 
// 二.定时器   
    let key = 1
    let timer = null
    // 将定时器 封装一个函数中  
    function autoPlay(){
     timer = setInterval(function(){
        // 构造0-9索引值
        play(key)
        key++
        if(key == 10){
          key=0
        }
      },1000)  
    }
    // 定时器停下来
    autoPlay()


 


    // 前进后退

    let next = document.querySelector(".next")
    next.addEventListener("click",function(){
      key++
      if(key == 10)
      key =0
      play(key)
    })
  
    
// 鼠标放在 不会动
    let text = document.querySelector('.extra')
    text.addEventListener("mouseenter",function(){
      // console.log("wocao");
      clearInterval(timer)
    })
    text.addEventListener("mouseleave",function(){
      autoPlay()
    })

  </script>
</body>
</html>

结果如下