AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-06-05 149
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用JS来制作轮播图定时器

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


接下来我们来简单介绍一下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>

77

接下来就是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>
文章标签：
JavaScript
前端开发
关键词：
JavaScript定时器
JavaScript轮播图
p4niqtkky5524
目录
相关文章
神明木佑
|
1月前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
神明木佑
24 7
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片，并通过点击下方的点（`span`标签）切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码，以及图片的展示和轮播图的效果图。
杀死一只知更鸟debug
21 1
js轮播图练习
神明木佑
|
1月前
|
JavaScript 前端开发
js之一次性定时器
js之一次性定时器
神明木佑
11 1
神明木佑
|
1月前
|
JavaScript 前端开发
js之永久定时器
js之永久定时器
神明木佑
13 1
Li370234940
|
1月前
|
JavaScript 前端开发
js轮播图有左右箭头和小点
js轮播图有左右箭头和小点
Li370234940
31 1
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
72 0
lvbb66
|
3月前
|
JavaScript
js轮播图制作
js轮播图制作
lvbb66
34 1
热爱技术的小郑
|
3月前
|
JavaScript 前端开发
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
这篇文章讨论了在JavaScript和Vue中如何避免定时器重复开启的问题，并提供了一个模拟场景和代码示例，演示了在开启新定时器前清除旧定时器的方法。
热爱技术的小郑
87 0
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
lvbb66
|
3月前
|
JavaScript
js轮播图功能
js轮播图功能
lvbb66
21 0
乐多_L
|
3月前
|
前端开发 JavaScript
如何使用JavaScript制作轮播图
如何使用JavaScript制作轮播图
乐多_L
27 0

热门文章

最新文章

  • 1
    实时显示日期、时间、城市天气（HTML+JS）
  • 2
    JavaScript值得注意的小知识点
  • 3
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 4
    走在JS上的全栈之路(一)
  • 5
    JavaScript 图片切割效果
  • 6
    js: 删除node的所有child
  • 7
    js正则表达式语法
  • 8
    Swift WKWebView JS 和 Native 交互(上)
  • 9
    开发者最容易犯的13个JavaScript错误
  • 10
    高性能Javascript--脚本的无阻塞加载策略
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    271
  • 3
    js【详解】arr.reduce() 数组缩减
    47
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    107
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    418
  • 6
    JavaScript进阶-JavaScript库与框架简介
    58
  • 7
    DVWA JavaScript 通关解析
    67
  • 8
    WEB三大主流框架之Vue.js
    45
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    221

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • jQuery开发教程
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云OSS设置跨域访问