HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

最新推荐文章于 2024-04-05 01:45:06 发布
最新推荐文章于 2024-04-05 01:45:06 发布
阅读量2.2k 收藏 7
点赞数 1
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/132014861
版权

一、需求

昨天我们做了轮播图的自动播放，即每隔一秒自动切换一次

今天我们增加两个需求：

1、鼠标点击向右按钮，轮播图往后切换一次；鼠标点击向左按钮，轮播图往前切换一次

2、鼠标悬停在轮播图区域中时，轮播图暂停播放

 

二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

<!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)' },
        ]
    </script>
</body>
 
</html>

三、算法思路

1、将代码素材在浏览器中打开，并按F12进入开发者模式，分析各个HTML标签在轮播图中的位置及作用

2、划分业务模块：

        2.1.  模块一：自动播放模块

        2.2.  模块二：手动播放模块

        2.3.  模块三：鼠标悬停暂停播放模块

3、由于三个模块都与轮播图的播放有关，所以我们可以封装一个函数，实现轮播图的渲染

4、手动播放模块：分别为两个按钮添加鼠标点击事件，计数器 i 配合渲染函数实现手动播放下一张与手动播放上一张

 5、自动播放模块：利用间歇函数实现一秒切换一次的功能，间歇函数中调用手动播放下一张模块中的鼠标点击事件实现轮播图的顺序播放

6、鼠标悬停暂停播放模块：注册光标进入事件，光标进入，终止定时器；注册光标离开事件，光标离开，开启定时器

四、完整代码

<!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 ul = document.querySelector('.slider-footer .slider-indicator')
    const footer = document.querySelector('.slider-footer')

    let i = 0
    function boFang() {
      img.src = `./images/slider0${i + 1}.jpg`
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      //注意classList.remove()括号中的类名不需要加点号！
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }

    //自动播放模块
    let timer = setInterval(() => {
      next.click()//自动调用鼠标点击事件
    }, 1000)

    //手动播放模块
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    prev.addEventListener('click', () => {
      i = i - 1 === -1 ? 7 : i - 1
      boFang()
    })
    next.addEventListener('click', () => {
      i = (i + 1) % 8
      boFang()
    })

    //鼠标悬停暂停播放模块
    const slider = document.querySelector('.slider')
    slider.addEventListener('mouseenter', () => {
      clearInterval(timer)
    })
    slider.addEventListener('mouseleave', () => {
      //开启定时器
      //注意，再次开启定时器不要写let timer
      timer = setInterval(() => {
        next.click()//自动调用鼠标点击事件
      }, 1000)
    })
</script>
</body>

</html>

早八睡不醒午觉睡不够的程序猿
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
轮播图自动播放
04-07
本篇详细介绍了页面中常见的轮播图效果在实际项目中的应用，利用css+html+js+dom来实现动态播放的效果
HTML+CSS+JavaScript：轮播图自动播放
lbcbjtlhmjq的博客
07-30 926
轮播图如下图所示，需求是每隔一秒轮播图自动切换一次。
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84097820的博客
04-05 401
点击这里即可免费获取，包括答案解析。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-mZyL1LyZ-1712252662271)]
图片轮播
zenkle的博客
10-26 281
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最简单的轮播效果&lt;/title&gt; &lt;style type="text/css"&gt;
实现自动轮播图（html+js）
csscsnscs的博客
10-13 4694
简单实现图片的自动轮播，当鼠标指针放在图片上时，暂停轮播，指针离开继续轮播。若指针在第二个小圆点上，就展示第二张图片，并且小圆点的样式也会变化。
记录：完整版轮播图
05-14 913
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&...
html5+css3+javascript实现轮播图功能
04-03
用html5+css3+javascript实现一个轮播图。 点击按钮可切换到对应的轮播图，把鼠标移走恢复正常轮播，每隔两秒换一张图 每过两秒，下标加一，跳到下一张 当图片走完最后一张，也就是下标为n的时候，跳到第一张 当鼠标...
html+js+css实现网页轮播图效果
03-08
网页轮播图效果： 1.轮播图主要结构，左右箭头，下方小圆点。 2.鼠标经过才显示左右箭头，鼠标离开时隐藏。 3.根据轮播图的图片个数，动态生成小圆点。...鼠标经过时，停止自动播放，鼠标离开时，恢复自动播放。
html+css实现幻灯片自动轮播代码
12-02
html+css实现幻灯片自动轮播代码特别实用的一个功能，部署也比较简单 对小白比较友好。
H5+CSS+JavaScript的轮播图
01-24
这是一个HTML+CSS+JavaScript的轮播图，资源改编于网络资源，侵删。
轮播图[javascript+html+css]
01-18
该轮播图资源就是我以前发过的“仿淘宝中心轮播图 JS[代码+详细讲解+效果图]”文章的所有资源。文章在下方链接： https://blog.csdn.net/weixin_52258054/article/details/124577699?spm=1001.2014.3001.5501 1.该...
html 轮播图
05-10
html js css 轮播图 html js css 轮播图 html js css 轮播图
JS特效实现图片自动播放并可控的效果
12-09
不多说了，实现方法请看下面代码。 代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" sr
自编js代码实现轮播图的自动播放以及点击左右切换按钮切换图片（源码！！！）
girls的博客
03-31 887
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0;
JS——【案例】图片轮播图(自动轮播/手动点击/悬停显示)[技术栈:html、css、JavaScript]
heart000_1
11-21 1014
图片轮播图(自动轮播/手动点击/悬停显示)，JavaScript实现图片轮播图功能
JavaScript案例（五）：轮播图；html+css+js实现轮播图功能以及自动切换图片
小张小张的博客
03-09 5028
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul, ol, li { list-st.
js的自动轮播和手动轮播
beibei_niao的博客
12-21 139
自动和手动轮播显示3张图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js创建轮播</title> <style> *{ margin:0; ...
html+css+js轮播图
qq_53911056的博客
11-12 2370
3、这段JS实现了一个轮播图的效果，包括了向左、向右切换图片、自动轮播、鼠标悬停停止轮播、小圆点点击切换图片等功能。具体实现方式是通过获取图片容器、图片、小圆点等元素，监听鼠标事件和小圆点点击事件，计算图片移动距离进行轮播图片的切换。本文介绍：通过html+css+js实现轮播图效果——自动轮播、左右箭头切换图片、小圆点点击切换图片。1、html（这里就不多介绍）2、css（这里就不多介绍）（注意这里采用字体图标）
使用HTML+css制作一个自动轮播图
06-04
好的，下面是一个简单的 HTML + CSS 自动轮播图实现步骤： 1. HTML 结构 首先，我们需要一个包含若干个图片的容器，每张图片用一个 img 元素表示，同时需要添加两个按钮用于切换图片： ``` <div class="slider"> <img src="image1.jpg" class="slide active"> <img src="image2.jpg" class="slide"> <img src="image3.jpg" class="slide"> ... <button class="prev">Previous</button> <button class="next">Next</button> </div> ``` 2. CSS 样式 接下来，我们需要为容器、图片和按钮设置样式： ``` .slider { width: 100%; height: 400px; position: relative; } .slide { width: 100%; height: 400px; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); padding: 10px 20px; background-color: #f00; color: #fff; border: none; cursor: pointer; } .prev { left: 20px; } .next { right: 20px; } ``` 其中，容器需要设置宽度、高度和 position:relative，以便让绝对定位的图片和按钮相对于容器进行定位。每张图片需要设置绝对定位，以便覆盖在容器的上方。初始时，每张图片的 opacity 值都为 0，表示不可见，只有被激活的图片的 opacity 值为 1，表示可见。当图片被激活时，会进行过渡动画，持续时间为 1 秒，缓动函数为 ease-in-out。按钮需要设置绝对定位，并使用 transform 属性将其垂直居中，同时添加背景色、文本颜色、边框和指针样式等基本样式。 3. JavaScript 功能 最后，我们需要使用 JavaScript 实现轮播图的功能： ``` const slides = document.querySelectorAll(".slide"); let currentSlide = 0; function nextSlide() { slides[currentSlide].classList.remove("active"); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add("active"); } setInterval(nextSlide, 3000); ``` 首先，使用 document.querySelectorAll(".slide") 获取所有图片元素，并将其存储在 slides 数组中。然后，定义一个变量 currentSlide，表示当前激活的图片下标，初始化为 0。接着，定义一个 nextSlide 函数，用于切换图片。在 nextSlide 函数中，首先将当前激活的图片的 active 类名移除，然后计算出下一张图片的下标，使用取余运算实现循环切换。最后，将下一张图片的 active 类名添加，实现过渡动画效果。 使用 setInterval 函数定时调用 nextSlide 函数，每隔 3 秒切换一张图片。 这样，一个简单的 HTML + CSS 自动轮播图就完成了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值