HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求

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

今天我们增加两个需求：

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

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

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

二、代码素材

以下是缺失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、鼠标悬停暂停播放模块：注册光标进入事件，光标进入，终止定时器；注册光标离开事件，光标离开，开启定时器文章来源地址https://www.toymoban.com/news/detail-621732.html

四、完整代码

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

到了这里，关于HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！