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

使用JS来实现轮播图的效果

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

首先是HTML部分


<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部分


 * {
      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;
    }


之后就是来介绍一下JS实现轮播图的效果


我们都知道轮播图点一下右边的箭头或者是左边的箭头就可以滚动页面


所以我们第一步先做右边的箭头


还是先声明一个数组，里面放了图片，和文字和背景颜色


第一步我们先获取三个元素，toggle()是一个方法调用，我是把左边和右边的写在一个方法，显示更加美观，，然后呢我们执行右侧按钮业务，还是先获取右侧按钮，然后定义一个信息量i=0


因为我们的i需要进行i++或者是i--的操作，所以在上面等单独定义一个i=0，记住这里不能用const，只能用let


然后注册点击事件： next.addEventListener('click', function()，


但是当我们轮播图到了最后一个，需要往返第一个，这时候我们需要判断，如果到了素组下标为8的时候，我们就得返回第一个


// 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)' },
    ]
   //获取元素
   const img=document.querySelector('.slider-wrapper img')
   const p=document.querySelector('.slider-footer p')
   const footer=document.querySelector('.slider-footer')
  // 1右侧按钮业务
  // 1.1获取右侧按钮
  const next=document.querySelector('.next')
  let i=0
  // 1.2注册点击事件
  next.addEventListener('click', function(){
    i++
    // 1.6判断
    if(i>=8){
      i=0
    }
    toggle()
  })


2.右侧的点击事件和左侧一样，就是需要换一下判断依据，还要获取的元素。前几章我已经说过如何来得到对应的对象，比如图片，文字和背景颜色还有更新的小圆点


// 2.左侧按钮
  const prev=document.querySelector('.prev')
  prev.addEventListener('click', function(){
    i--
    // 1.6判断
    i=i<0?sliderData.length-1:i
   toggle()
  })
  function toggle(){
//公共部分
 // 1.3得到对应的对象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更换小圆点
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }


3，最后讲一个功能，这里我们依旧是在定时器上面声明一个变量，因为我们定时器也是有一直在懂，所以我们来这块设定一个点击事件


然后我们加了这样一个功能，比如鼠标经过盒子停止定时器，或者是离开又开始定时器的操作


通称都用了这两个事件


第一个是鼠标经过停止事件，第二个是开始事件，这样呢我们一个完整的轮播图就做出来了


slider.addEventListener('mouseenter', function(){


slider.addEventListener('mouseleave', function()


// 3.自动播放
  let timerId=setInterval(function(){
    next.click()
  },1000)
  // 4.鼠标经过大盒子，停止定时器
  const slider=document.querySelector('.slider')
  //注册事件
  slider.addEventListener('mouseenter', function(){
    //停止定时器
    clearInterval(timerId)
  })
  // / 4.鼠标经过大盒子，开启定时器
  //注册事件
  slider.addEventListener('mouseleave', function(){
    //停止定时器
    clearInterval(timerId)
   timerId = setInterval(function(){
    next.click()
  },1000)
  })


这是源码


<!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)' },
    ]
   //获取元素
   const img=document.querySelector('.slider-wrapper img')
   const p=document.querySelector('.slider-footer p')
   const footer=document.querySelector('.slider-footer')
  // 1右侧按钮业务
  // 1.1获取右侧按钮
  const next=document.querySelector('.next')
  let i=0
  // 1.2注册点击事件
  next.addEventListener('click', function(){
    i++
    // 1.6判断
    if(i>=8){
      i=0
    }
    toggle()
  })
  // 2.左侧按钮
  const prev=document.querySelector('.prev')
  prev.addEventListener('click', function(){
    i--
    // 1.6判断
    i=i<0?sliderData.length-1:i
   toggle()
  })
  function toggle(){
 // 1.3得到对应的对象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更换小圆点
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }
  // 3.自动播放
  let timerId=setInterval(function(){
    next.click()
  },1000)
  // 4.鼠标经过大盒子，停止定时器
  const slider=document.querySelector('.slider')
  //注册事件
  slider.addEventListener('mouseenter', function(){
    //停止定时器
    clearInterval(timerId)
  })
  // / 4.鼠标经过大盒子，开启定时器
  //注册事件
  slider.addEventListener('mouseleave', function(){
    //停止定时器
    clearInterval(timerId)
   timerId = setInterval(function(){
    next.click()
  },1000)
  })
  </script>
</body>
</html>
文章标签：
JavaScript
前端开发
关键词：
JavaScript轮播图
p4niqtkky5524
目录
相关文章
神明木佑
|
2月前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
神明木佑
29 7
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片，并通过点击下方的点（`span`标签）切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码，以及图片的展示和轮播图的效果图。
杀死一只知更鸟debug
21 1
js轮播图练习
Li370234940
|
2月前
|
JavaScript 前端开发
js轮播图有左右箭头和小点
js轮播图有左右箭头和小点
Li370234940
31 1
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
77 0
lvbb66
|
4月前
|
JavaScript
js轮播图制作
js轮播图制作
lvbb66
37 1
lvbb66
|
4月前
|
JavaScript
js轮播图功能
js轮播图功能
lvbb66
21 0
乐多_L
|
4月前
|
前端开发 JavaScript
如何使用JavaScript制作轮播图
如何使用JavaScript制作轮播图
乐多_L
33 0
刘志辉~
|
4月前
|
JavaScript
js之简单轮播图
js之简单轮播图
刘志辉~
39 0
写代码的大学生
|
6月前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
写代码的大学生
52 3
67vpym2vvkfhs
|
6月前
|
机器学习/深度学习 JavaScript 前端开发
一篇文章讲明白JS左右轮播图的制作思路
一篇文章讲明白JS左右轮播图的制作思路
67vpym2vvkfhs
40 0

热门文章

最新文章

  • 1
    【转】Javascript关键字和保留字
  • 2
    OC与JS互相调用
  • 3
    JavaScript 操作 Cookie
  • 4
    Node.js 中流操作实践
  • 5
    05.javascript访问CSS
  • 6
    javascript工厂模式和构造方法
  • 7
    如何让你的JavaScript代码更加语义化
  • 8
    js数组遍历some,foreach,map,filter,every对比
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    深入理解JavaScript中的事件循环机制
    85
  • 2
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    110
  • 3
    JavaScript 数组方法概览
    37
  • 4
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    61
  • 5
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    46
  • 6
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 7
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    57
  • 8
    JavaScript 的垃圾回收机制有一些潜在的缺点
    41
  • 9
    nbcio-vue下载安装后运行报错，diagram-js没有安装
    63
  • 10
    了解JavaScript的垃圾回收机制
    39

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • CSS 快速掌握
  • jQuery开发教程
  • 前端开发CSS基础

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月