完整样式的轮播图(js)

跑不起来的MS.T

已于 2024-03-10 13:35:06 修改

阅读量182

点赞数 2

分类专栏： js 文章标签： javascript css css3

于 2024-03-10 13:34:40 首次发布

本文链接：https://blog.csdn.net/m0_73042271/article/details/136600070

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript构建一个基本的图片轮播组件，包括样式设计、DOM操作以及使用事件监听控制图片切换。

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

主要是script那块

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    box-sizing: border-box;
  }

  .slider {
    width: 560px;
    height: 400px;
    overflow: hidden;
    background-color: pink;
  }

  .slider-wrapper {
    width: 100%;
    height: 320px;
  }

  .slider-wrapper img {
    width: 100%;
    height: 100%;
    /* 图片转换为块级元素 */
    display: block;
  }

  .slider-footer {
    height: 80px;
    background-color: rgb(100, 67, 68);
    /* 底部文字和左边留点距离 */
    padding: 12px 12px 0 12px;
    position: relative;
  }

  .solider-footer .toggle {
    position: absolute;
    right: 0;
    top: 12px;
    /* flex布局 */
    /* display: flex; */
  }

  .slider-footer .toggle button {
    margin-right: 12px;
    width: 28px;
    height: 28px;
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
  }

  .slider-footer .toggle button:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .slider-footer p {
    margin: 0;
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .slider-indicator {
    margin: 0;
    padding: 0;
    /* 把小li标签前面的点给去掉 */
    list-style: none;
    /* flex布局,里面的小li有序摆放,无需浮动 */
    display: flex;
    /* 设置主轴上的子元素的排列方式 默认flex-start */
    justify-content: flex-start;
    /* 侧轴上子元素的排列方式 */
    align-items: center;
  }

  .slider-indicator li {
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background: #fff;
    /* 透明度 */
    opacity: 0.4;
    /* 鼠标 */
    cursor: pointer;
  }

  .slider-indicator li.active {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
</style>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./img/01.webp" title="是谁的小鹿啊" alt="">
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toogle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1.初始数据
    const sliderData = [
      { url: "./img/01.webp", title: '对人类来说会不会太超前了?', color: 'rgb(100,67,68)' },
      { url: "./img/02.webp", title: '开启剑与雪的传说!', color: 'rgb(43,35,26)' },
      { url: "./img/03.webp", title: '真正的jo厨出现了', color: 'rgb(36,31,33)' },
      { url: "./img/04.webp", title: '李玉刚:让世界通过b站看到东方大国文化', color: 'rgb(139,98,66)' },
      { url: "./img/05.webp", title: '快来分享你的寒假日常吧', color: 'rgb(67,90,92)' },
      { url: "./img/06.webp", title: '而你却,靠近了', color: 'rgb(166,131,143)' },
      { url: "./img/07.webp", title: '此时我们视线交错', color: 'rgb(53,29,25)' },
      { url: "./img/08.webp", title: '身骑白马唔哦哦~', color: 'rgb(99,72,114)' },
    ]

    // 获取对象
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const color = document.querySelector('.slider-footer')
    // 小圆点渲染

    // 获取按钮对象
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    // 添加时间监听
    // 尾巴和头转换很重要,区分好逻辑关系
    //往前走注意头,往后走注意尾巴
    //================================方法一=========================
    let i = 0
    // i的取值很关键 注意区分好li的索引值和对象数组的下标值
    prev.addEventListener('click', function () {
      i = i <= 0 ? 8 : i
      const preli = document.querySelector(`.slider-footer .slider-indicator .active`)
      const nexli = document.querySelector(`.slider-footer .slider-indicator li:nth-child(${i + 1 - 1})`)
      preli.classList.remove('active')
      nexli.classList.add('active')
      i--
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      color.style.backgroundColor = sliderData[i].color

    })
    next.addEventListener('click', function () {
      i = i >= 7 ? -1 : i
      const preli = document.querySelector(`.slider-footer .slider-indicator .active`)
      const nexli = document.querySelector(`.slider-footer .slider-indicator li:nth-child(${i + 1 + 1})`)
      preli.classList.remove('active')
      nexli.classList.add('active')
      i++
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      color.style.backgroundColor = sliderData[i].color
      console.log(i)
    })
    //===============================方法二=================================
    let indexli = 1
    let indexdata = 0
    //将li的索引和对象数据的索引分开来
    prev.addEventListener('click', function () {
      indexli--
      indexli = indexli < 1 ? 8 : indexli
      const preli = document.querySelector(`.slider-footer .slider-indicator .active`)
      const nexli = document.querySelector(`.slider-footer .slider-indicator li:nth-child(${indexli})`)
      preli.classList.remove('active')
      nexli.classList.add('active')
      indexdata--
      indexdata = indexdata < 0 ? 7 : indexdata
      img.src = sliderData[indexdata].url
      p.innerHTML = sliderData[indexdata].title
      color.style.backgroundColor = sliderData[indexdata].color
    })
    next.addEventListener('click', function () {
      indexli++
      indexli = indexli > 8 ? 1 : indexli
      const preli = document.querySelector(`.slider-footer .slider-indicator .active`)
      const nexli = document.querySelector(`.slider-footer .slider-indicator li:nth-child(${indexli})`)
      preli.classList.remove('active')
      nexli.classList.add('active')
      indexdata++
      indexdata = indexdata > 7 ? 0 : indexdata
      img.src = sliderData[indexdata].url
      p.innerHTML = sliderData[indexdata].title
      color.style.backgroundColor = sliderData[indexdata].color
    })
  </script>
</body>

</html>