【JavaScript】轮播图的实现

最新推荐文章于 2024-06-29 22:58:02 发布
最新推荐文章于 2024-06-29 22:58:02 发布
阅读量608 收藏 9
点赞数 8
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75462083/article/details/134851660
版权

一、功能介绍 

二、过程解析

1.进行基础布局

初始值的信息都设置为第一张轮播图的信息

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

2.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>

3.实现图片，文字，颜色自动变换

<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 let num = 0
    // 获取图片标签对象
    const image = document.querySelector('.slider-wrapper img')
    // 获取文本标签对象
    const title = document.querySelector('.slider-footer p')
    // 获取颜色所在标签对象（这里修改的颜色是对CSS内的属性进行修改）
    const color = document.querySelector('.slider-footer')
    // 获取圆点标签对象
    const dot = document.querySelectorAll('.slider-indicator li')
    //内容变换函数
    function changeImg(){
      num++
      // 当执行完一轮后把num的值置为0，从而实现一直执行下去
      num = num>=sliderData.length?num%sliderData.length:num
      // 修改图片
      image.src = sliderData[num].url
      // 修改背景颜色
      color.style.backgroundColor = sliderData[num].color
      // 修改文本
      title.innerHTML = sliderData[num].title
    }
    // 开启定时器
    let time = setInterval(changeImg,1000)
  </script>

4.实现圆点的自动变换

圆点对应的样式在css中，在轮播图跳转时要为新的圆点添加样式，并且去掉上一个圆点的样式，在changeImg函数中添加了一个判断条件，上一个圆点是否为最后一个

function changeImg(){
      num++
      num = num>=sliderData.length?num%sliderData.length:num
      // 修改图片
      image.src = sliderData[num].url
      // 修改背景颜色
      color.style.backgroundColor = sliderData[num].color
      // 修改文本
      title.innerHTML = sliderData[num].title
      // 修改圆点样式
      if(num>0){
        // 为当前圆点添加样式，去掉上一个原点的样式
        dot[num].classList.add('active')
        dot[num-1].classList.remove('active')
      }else{
        dot[0].classList.add('active')
        dot[sliderData.length-1].classList.remove('active')
      }
    }

5.实现点击按钮进行切换

在点击按钮的函数中要关闭定时器，如果不关闭则在切换的时候计时器也在运行，也会执行切换的操作，在函数的最后要重新开启定时器

// 获取按钮对象
    const next = document.querySelector('.next')
    const pre = document.querySelector('.prev')
    // 鼠标事件检测
    next.addEventListener('click',function(){
      // 关闭定时器
      clearInterval(time)
      // 点击next按钮与切换下一张的操作相同，可以直接调用上面函数
      changeImg()
      // 开启定时器
      time = setInterval(changeImg,1000)
    })
    pre.addEventListener('click',function(){
      clearInterval(time)
      // pre按钮切换到上一张，与前面的函数相反，所以不能直接调用
      num--
      // 当上一个图片对应的下标为0时，当前图片对应的下标为列表的最后一个
      num = num<0?sliderData.length-1:num
      image.src = sliderData[num].url
      color.style.backgroundColor = sliderData[num].color
      title.innerHTML = sliderData[num].title
      // 修改圆点
      if(num<sliderData.length-1){
        dot[num].classList.add('active')
        dot[num+1].classList.remove('active')
      }else{
        dot[0].classList.remove('active')
        dot[num].classList.add('active')
      }
      time = setInterval(changeImg,1000)
    })

6.实现悬停不切换

这里选择的区域是图片的区域

当鼠标移入时关闭定时器，当鼠标移出时开启定时器

image.addEventListener('mouseenter',function(){
      clearInterval(time)
    })
    image.addEventListener('mouseleave',function(){
      time = setInterval(changeImg,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)' },
    ]
    // 图片初始下标设置
    let num = 0
    // 获取图片标签对象
    const image = document.querySelector('.slider-wrapper img')
    // 获取文本标签对象
    const title = document.querySelector('.slider-footer p')
    // 获取颜色所在标签对象
    const color = document.querySelector('.slider-footer')
    // 获取圆点标签对象
    const dot = document.querySelectorAll('.slider-indicator li')
    //图片变换函数
    function changeImg(){
      num++
      num = num>=sliderData.length?num%sliderData.length:num
      // 修改图片
      image.src = sliderData[num].url
      // 修改背景颜色
      color.style.backgroundColor = sliderData[num].color
      // 修改文本
      title.innerHTML = sliderData[num].title
      // 修改圆点样式
      if(num>0){
        dot[num].classList.add('active')
        dot[num-1].classList.remove('active')
      }else{
        dot[0].classList.add('active')
        dot[sliderData.length-1].classList.remove('active')
      }
    }
    // 开启定时器
    let time = setInterval(changeImg,1000)
    // 获取按钮对象
    const next = document.querySelector('.next')
    const pre = document.querySelector('.prev')
    // 鼠标事件检测
    next.addEventListener('click',function(){
      // 关闭定时器
      clearInterval(time)
      changeImg()
      // 开启定时器
      time = setInterval(changeImg,1000)
    })
    pre.addEventListener('click',function(){
      clearInterval(time)
      num--
      // 当上一个图片对应的下标为0时，当前图片对应的下标为列表的最后一个
      num = num<0?sliderData.length-1:num
      image.src = sliderData[num].url
      color.style.backgroundColor = sliderData[num].color
      title.innerHTML = sliderData[num].title
      // 修改圆点
      if(num<sliderData.length-1){
        dot[num].classList.add('active')
        dot[num+1].classList.remove('active')
      }else{
        dot[0].classList.remove('active')
        dot[num].classList.add('active')
      }
      time = setInterval(changeImg,1000)
    })
    image.addEventListener('mouseenter',function(){
      clearInterval(time)
    })
    image.addEventListener('mouseleave',function(){
      time = setInterval(changeImg,1000)
    })

  </script>
</body>

</html>

S&HH
关注
使用JavaScript实现轮播图功能（超详细）
rr20060119的博客
03-29 2252
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
javascript实现图片轮播效果
Ariel的博客
04-15 1807
目录 目录 效果预览 HTML代码 CSS代码 JavaScript代码 效果预览 本章将实现以下效果： HTML代码 &amp;lt;div class=&quot;wrap&quot; id='wrap'&amp;gt; &amp;lt;ul id=&quot;pic&quot; class=&quot;pic&quot;&amp;gt; &amp;lt;
javascript实现图片轮播
HL141916的博客
05-25 720
javascript实现图片自动轮播
原生js实现轮播图——卡片模式(视频)
最新发布
m0_72684019的博客
06-29 263
【代码】原生js实现轮播图——卡片模式(视频)
js实现图片轮播
11-30
js文件实现图片轮播
js（javascript）实现图片轮播效果
KeaLoo
10-08 664
1.左右箭头能够控制翻页 2.翻页的时候，进度点，要联动进行focus 3.翻到第三页的时候，下一页需要回到第一页，翻到第一页的时候同理 4.进度点，在点击的时候，需要切换到相应的页面， 5.没有（进度点点击、翻页操作）的时候需要进行自动滚动 6.滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击） $.fn.UiSlider = function(){ var ui = $(this); var wrap = $('.ui-slider-wrap'); var btn_prev = $('.u
手把手教你用原生js实现轮播图特效
fenglingcxd的博客
08-27 2411
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。 原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： ...
javaScript轮播图实现代码
07-07
以下是关于这个JavaScript轮播图实现的相关知识点： 1. **HTML结构**： - 轮播图的基础是HTML结构，通常包含一个容器元素（如`div`）以及一系列图片或内容的`<img>`标签。这些`<img>`标签可能被设置为`display:...
javascript轮播图实现（转抄于网络）
07-28
以上就是一个基本的JavaScript轮播图实现。当然，实际项目中可能需要考虑更多的细节，例如触摸滑动支持、响应式布局、图片加载优化等。这个示例只是一个起点，开发者可以根据实际需求进行扩展和优化。在实际应用中，...
详解JavaScript实现动态的轮播图效果
10-17
JavaScript 实现动态轮播图是一种常见的网页交互效果，它能够为用户提供流畅的图像展示体验，通常用于产品展示、幻灯片等场景。本篇文章将深入探讨如何使用 JavaScript 实现这一功能，结合示例代码帮助读者理解和...
javascript轮播图的实现
05-31
janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
JS实现图片轮播效果(绝对可用）
03-30
绝对可用，利用javasScript实现图片轮播，具有1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 等功能
JavaScript+HTML+CSS实现图片轮播
06-06
原生JavaScript实现图片轮播，demo很完整，可以直接在浏览器中运行。
javascript轮播图片的实现
06-07
在实现JavaScript轮播图的过程中，主要涉及以下几个步骤： 1. **引入资源**：确保引入Swiper插件的CSS和JS文件。在`index.html`中，通常会在`<head>`部分引入CSS文件，而在`<body>`底部或者`<head>`中引入JS文件。...
JavaScript完成轮播图
hongtaochi0464的博客
04-22 788
轮播图的思想 轮播图的思想,最简单的描述就是通过修改不可见框的left值,来实现滑动播放的效果。 这篇文章从三大步骤来写一下轮播图的实现。 (一)完成轮播图界面 (二)完成点击按钮切换图片的功能 (三)使用定时器完成轮播图的功能 完成轮播图的界面 不可见框 不可见框中应该把图片连成横向一排，像胶卷一样。 <body> <!-- #outer为不可见框部分 将所有的图片连成一排...
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1753
class = "current" 用于定位当前显示图片所在位置。
【JS】使用JavaScript实现轮播图
点滴记忆
07-19 468
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
js制作轮播图
weixin_35757531的博客
01-05 382
好的，那我就用中文来给你介绍一下如何使用 JavaScript 制作轮播图。 首先，你需要在 HTML 中准备好轮播图所需的元素，包括轮播图的容器(一般是一个 div)、轮播图中的每一张图片(使用 img 标签)、以及用来切换图片的按钮(可以使用 button 或者 a 标签)。 然后，在 JavaScript 中，我们可以通过为这些元素绑定事件来实现轮播图的效果。例如，当用户点击向前翻按钮时，J...
JavaScript轮播图实现教程与代码示例
本文将详细介绍如何通过JavaScript实现一个简单的轮播图效果，适用于网页设计中的广告条或图片切换展示。以下是实现这个功能所需的HTML结构、CSS样式以及关键的JavaScript代码。 首先，我们来看HTML结构部分： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值