使用JS来制作轮播图定时器

最新推荐文章于 2024-04-13 17:28:35 发布

几何小超

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量1.4k

点赞数 11

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_64965154/article/details/130754287

版权

个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好前端

大家好，今天为大家带来定时的轮播图，通过刷新之后轮播图会没距离一秒来进行转动

接下来我们来简单介绍一下HTML结构

这有个大盒子叫slider

然后下面放了装图片的盒子叫slider-wrapper

再放一个装文字和ul和li的盒子叫slider-indicator的盒子 ul li(设置小圆点)

然后下面是也有一个盒子装这两个小盒子，一个是prev，一个是设置next

<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 class="active"></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>

接下来是CSS结构

<style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .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;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      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;
      list-style: none;
      display: flex;
      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>

接下来就是JS结构

第一步我们可以先设置一个数组sliderData的数组，里面来一一装图片 title 和颜色

完成这一步我们可以来获取元素使用document.querySelector来获取元素，可能会和老版本不同，因为我这是新版的JSAPl，不管是结构还是语法都比以前方便了很多

我们获取两个元素后然后需要设置初始值才能进行数字改变，所以这块我们不难定义cont，只能定义let ，因为cont是常量，不能修改里面的值，let恰恰相反

2.第二步我们开启定时器

setInterval意思就是打开定时器的意思，然后我们里面写了一个方法，i++意思就是每隔一段时间我们这里面要加1

if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少

然后我们进行更换图片的路径

然后呢我们需要把文字写到p标签里面去

使用p.innerHTML=sliderData[i].title

这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死

最后一部就是写我们的小圆点

//先删除以前的小圆点
document.querySelector('.slider-indicator .active').classList.remove('active')

删除这个小圆点是为了避免重复出现小圆点remove是删除的意思

//只让当前的li添加active
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串

到这里我们整个架构就介绍完了，接下来展示源码

 <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 img=document.querySelector('.slider-wrapper img')
  const p=document.querySelector('.slider-footer p')
  let i=0
  //2.开启定时器
  setInterval(function(){
    i++
    //无线链接位置 一共八张，到了最后一张 数组长度就是八
    if(i>=sliderData.length){
      i=0  
    }
    //更换图片路径
    img.src=sliderData[i].url
    //把子写到p里面去
    p.innerHTML=sliderData[i].title
    //小圆点
    //先删除以前的小圆点
    document.querySelector('.slider-indicator .active').classList.remove('active')
    //只让当前的li添加active
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  },1000)

  </script>

源码如下：

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .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;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      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;
      list-style: none;
      display: flex;
      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>
</head>

<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 class="active"></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 img=document.querySelector('.slider-wrapper img')
  const p=document.querySelector('.slider-footer p')
  let i=0
  //2.开启定时器
  setInterval(function(){
    i++
    //无线链接位置 一共八张，到了最后一张 数组长度就是八
    if(i>=sliderData.length){
      i=0  
    }
    //更换图片路径
    img.src=sliderData[i].url
    //把子写到p里面去
    p.innerHTML=sliderData[i].title
    //小圆点
    //先删除以前的小圆点
    document.querySelector('.slider-indicator .active').classList.remove('active')
    //只让当前的li添加active
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  },1000)

  </script>
</body>

</html>

几何小超

关注

11
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
5
评论
使用JS来制作轮播图定时器

这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
复制链接

扫一扫