javascript轮播图-焦点图

最新推荐文章于 2022-08-12 16:57:09 发布

Jerry-0425

最新推荐文章于 2022-08-12 16:57:09 发布

阅读量280

点赞数 1

分类专栏： Wed_APIs 文章标签： js

本文链接：https://blog.csdn.net/weixin_52088589/article/details/111998958

版权

Wed_APIs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

焦点图，轮播图

在这里插入图片描述

<!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>
    .main {
      width: 700px;
      margin: auto;
      background: #000;
    }

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

    .slides img {
      display: none;
    }

    .slides img:first-child {
      display: block;
    }

    .slides .current {
      display: block;
    }

    .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;
    }
   /* 使用css定义显示和隐藏 */
   .indicator .active .mask {
    display: none;
   }
   
   .indicator .active .border {
     display: block;
   }
  </style>
</head>

<body>
  <div class="main">
    <div class="slides">
      <img src="./assets/b_01.jpg" alt="第1张图的描述信息">
      <img src="./assets/b_02.jpg" alt="第2张图的描述信息">
      <img src="./assets/b_03.jpg" alt="第3张图的描述信息">
      <img src="./assets/b_04.jpg" alt="第4张图的描述信息">
      <img src="./assets/b_05.jpg" alt="第5张图的描述信息">
      <img src="./assets/b_06.jpg" alt="第6张图的描述信息">
      <img src="./assets/b_07.jpg" alt="第7张图的描述信息">
      <img src="./assets/b_08.jpg" alt="第8张图的描述信息">
      <img src="./assets/b_09.jpg" alt="第9张图的描述信息">
      <img src="./assets/b_10.jpg" alt="第10张图的描述信息">
      <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>
    //获取元素
    let lis = document.querySelectorAll('.indicator li')
    let imgs = document.querySelectorAll('.slides>img')
    let h3Text = document.querySelector('.extra h3')

    //按钮获取元素
    let prev = document.querySelector('.extra .prev')
    let next = document.querySelector('.extra .next')

    let main = document.querySelector('.main')

    //按钮变量
    let index = 0

    //定时器变量
    let timer = null


    //自动播放函数
    function name() {
      index++
      index = index % lis.length
      fu()
    }

    //抽取相同代码封装
    function fu() {
      //点击时底部图片跟随变换
      document.querySelector('.indicator .active').className = ''
      lis[index].className = 'active'

      //点击时图片跟随变换
      for (let j = 0; j < imgs.length; j++) {
          //把所有图片隐藏
          imgs[j].style.display = 'none'
        }
        //以下代码写在循环外,节约浏览器性能,不用多次循环
        //单独显示经过的一个
        imgs[index].style.display = 'block'

        //文字跟随变换
        h3Text.innerHTML = `第${index + 1}张图的描述信息`
    }


    //开始底部图片鼠标经过业务
    //循环得到每个li
    for (let i = 0; i < lis.length; i++) {
      //设置鼠标经过
      lis[i].addEventListener('mouseover', function () {
        index = i
        //函数调用需要放在下边
        fu()
      })
    }

    //开始右边按钮业务, 用index来控制
    next.addEventListener('click', function () {
      index++
      //判断条件
      index = index % lis.length

      //函数已封装,直接调用
      fu()
    })

    //开始左边按钮业务
    prev.addEventListener('click', function () {
      // 判断条件第一种 减减放后边
      if (index == 0) {
        index = 10
      }

      // 判断条件第二种 减减需要放前面
      // if(index < 0){
      //   index = lis.length - 1
      // }
      index--

      //函数已封装,直接调用
        fu()
    })


    //定时器函数
    timer = setInterval(name, 1000)

    //鼠标移入停止播放
    main.addEventListener('mouseover', function () {
      clearInterval(timer)
    })
    //鼠标移除开始播放
    main.addEventListener('mouseout', function () {
      timer = setInterval(name, 1000)
    })
  </script>
</body>

</html>

Jerry-0425

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript轮播图-焦点图

焦点图，轮播图<!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> .main { width:
复制链接

扫一扫