【JavaScript】轮播图的实现

最新推荐文章于 2024-09-22 22:49:42 发布
最新推荐文章于 2024-09-22 22:49:42 发布
阅读量866 收藏 12
点赞数 9
文章标签： 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实现简易轮播图
FirstMark
01-01 1894
JavaScript实现简易轮播图 Html代码块： &amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;container&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;box&amp
javascript实现轮播图效果
kun的博客
11-25 4701
实现效果如图：   CSS与HTML就不讲了，比较简单，大家用 笔画一下图就懂了，主要说js代码 (建议大家先把css中#container的overflow:hidden;注释掉，这样可以看得直观一点) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;js轮播图&lt;/title&gt; &lt;style t...
JavaScript完成轮播图
hongtaochi0464的博客
04-22 2171
轮播图的思想 轮播图的思想,最简单的描述就是通过修改不可见框的left值,来实现滑动播放的效果。 这篇文章从三大步骤来写一下轮播图的实现。 (一)完成轮播图界面 (二)完成点击按钮切换图片的功能 (三)使用定时器完成轮播图的功能 完成轮播图的界面 不可见框 不可见框中应该把图片连成横向一排，像胶卷一样。 <body> <!-- #outer为不可见框部分 将所有的图片连成一排...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
前端-js：轮播图
最新发布
m0_75163045的博客
09-22 463
学校官网都会有图片轮播，包括自动轮播及手动切换。
使用JavaScript实现轮播图功能（超详细）
rr20060119的博客
03-29 2362
通过自动或手动切换，轮播图能够有效地吸引用户的注意力，并展示重要的信息。在本篇博客中，我们将详细介绍如何使用原生JavaScript来实现一个简单的轮播图功能。切换图片：编写一个函数来切换图片，通过改变轮播图容器的transform属性来实现。首先，我们创建一个简单的HTML结构，其中包含轮播图的容器、图片和控制按钮。现在，我们使用JavaScript来实现轮播图的功能。设置状态：为轮播图设置一个当前索引状态，用于跟踪当前显示的图片。HTML结构：创建一个包含图片和轮播图控制按钮的HTML结构。
纯js代码实现轮播图
03-13
纯js代码实现轮播图
javaScript轮播图实现代码
07-07
以下是关于这个JavaScript轮播图实现的相关知识点： 1. **HTML结构**： - 轮播图的基础是HTML结构，通常包含一个容器元素（如`div`）以及一系列图片或内容的`<img>`标签。这些`<img>`标签可能被设置为`display:...
javascript轮播图实现（转抄于网络）
07-28
以上就是一个基本的JavaScript轮播图实现。当然，实际项目中可能需要考虑更多的细节，例如触摸滑动支持、响应式布局、图片加载优化等。这个示例只是一个起点，开发者可以根据实际需求进行扩展和优化。在实际应用中，...
javascript轮播图的实现
05-31
janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现janacsript轮播图的实现...
详解JavaScript实现动态的轮播图效果
10-17
JavaScript 实现动态轮播图是一种常见的网页交互效果，它能够为用户提供流畅的图像展示体验，通常用于产品展示、幻灯片等场景。本篇文章将深入探讨如何使用 JavaScript 实现这一功能，结合示例代码帮助读者理解和...
js实现图片轮播
11-30
js文件实现图片轮播
js实现网站轮播图
09-09
使用javascript利用定时器，以及函数封装原理，实现网站轮播图效果。简单的原生js实现轮播图效果，使用时请自行将代码分离
JS轮播图--纯JS实现
07-24
基于纯JavaScript实现的图片轮播，css、js代码都写在了html文件中，可以直接下载
javascript轮播图片的实现
06-07
在实现JavaScript轮播图的过程中，主要涉及以下几个步骤： 1. **引入资源**：确保引入Swiper插件的CSS和JS文件。在`index.html`中，通常会在`<head>`部分引入CSS文件，而在`<body>`底部或者`<head>`中引入JS文件。...
js（javascript）实现图片轮播效果
KeaLoo
10-08 685
1.左右箭头能够控制翻页 2.翻页的时候，进度点，要联动进行focus 3.翻到第三页的时候，下一页需要回到第一页，翻到第一页的时候同理 4.进度点，在点击的时候，需要切换到相应的页面， 5.没有（进度点点击、翻页操作）的时候需要进行自动滚动 6.滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击） $.fn.UiSlider = function(){ var ui = $(this); var wrap = $('.ui-slider-wrap'); var btn_prev = $('.u
【JS】使用JavaScript实现轮播图
点滴记忆
07-19 481
<!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...
原生JavaScript轮播图功能的实现
欢愉码农的博客
06-13 1912
class = "current" 用于定位当前显示图片所在位置。
javascript实现图片轮播
HL141916的博客
05-25 738
javascript实现图片自动轮播
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值