JS实现之随机轮播图

阿文喜欢碎碎唠

已于 2024-05-31 20:35:42 修改

阅读量233

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

于 2024-03-16 17:51:24 首次发布

本文链接：https://blog.csdn.net/weixin_62189550/article/details/136766631

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

案例：随机轮播图
知识点：获取元素，修改DOM对象的内容/样式属性
内容：随机换图，换标题，换背景色，换小圆点
思路如下

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: 'images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: 'images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: 'images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: 'images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: 'images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: 'images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: 'images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: 'images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    // 1、生成随机下标，获取随机的数据对象
    const random = parseInt(Math.random()*sliderData.length)

    //2、获取HTML元素，依次将数据里的内容/样式换到DOM对象里
    //获取图片dom对象,修改样式属性，使用 对象.属性
    const img = document.querySelector('.slider-wrapper img')
    img.src=sliderData[random].url

    //获取标题元素，修改内容用innerHTML放数据
    const title = document.querySelector('.slider-footer p')
    title.innerHTML = sliderData[random].title
    
    //换背景色，属于样式属性，用style.属性
    const bg = document.querySelector('.slider-footer')
    bg.style.backgroundColor = sliderData[random].color

    //换小圆点，利用伪类结构选择器获取random+1个li
    const lis = document.querySelector(`.slider-indicator li:nth-child(${random+1})`)
    lis.classList.add('active') 

  </script>
</body>