轮播图es6做法最完整版,自动播放,按钮换图。。。

这篇博客详细介绍了如何使用ES6语法实现一个轮播图功能,包括自动播放、按钮切换图片等功能。示例代码中,轮播图组件包含了图片切换、文字描述更新和背景颜色变化,同时在鼠标悬停时停止自动播放,移开后恢复自动播放。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

         const data = [

      { 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 pic = document.querySelector('.slider-footer')

    let i = 0 //信号量

    //获取右边的按钮

    const next = document.querySelector('.toggle .next')

    //添加事件

    next.addEventListener('click' ,function(){

        i++

        if(i >= data.length){

            i = 0

        }

        img.src = data[i].url

        p.innerHTML = data[i].title

        pic.style.background = data[i].color

        document.querySelector('.slider-indicator .active').classList.remove('active')

        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

    })

    //获取左边的按钮

    const prev = document.querySelector('.toggle .prev')

    //添加事件

    prev.addEventListener('click' , function(){

        i--

        if(i <= 0){

            i = data.length - 1

        }

        img.src = data[i].url

        p.innerHTML = data[i].title

        pic.style.background = data[i].color

        document.querySelector('.slider-indicator .active').classList.remove('active')

        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

    })

    //自动播放

    let timerId = 0

    timerId = setInterval(function(){

        next.click()

    },1000)

    const slider = document.querySelector('.slider')

    //当鼠标进入这个页面时

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

        clearInterval(timerId)

    })

    //当鼠标离开这个页面时

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

        timerId = setInterval(function(){

        next.click()

    },1000)

    })

      </script>

</body>

</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值