html+css+js实现轮播图

实现效果:

HTML部分

html 复制代码
<div class="carousel">
    <div class="carousel-wrapper">
      <img src="./image/1.png" alt="">
    </div>
    <ul class="carousel-indictor">
      <li class="active" data-id="0"></li>
      <li data-id="1"></li>
      <li data-id="2"></li>
      <li data-id="3"></li>
    </ul>
    <div class="toggle">
      <button class="prev"><</button>
      <button class="next">></button>
    </div>
  </div>

CSS部分

css 复制代码
<style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li{
      list-style: none;
    }
    button{
      border: none;
      outline: none;
    }
    .carousel{
      position: relative;
      width: 700px;
      height: 300px;
      margin: 50px auto;
    }
    .carousel-wrapper{
      width: 700px;
      height: 300px;
    }
    .carousel-wrapper img{
      width: 100%;
      height: 100%;
    }
    .carousel-indictor{
      position: absolute;
      bottom: 30px;
      left: 150px;
      width: 400px;
      height: 5px;
      display: flex;
      justify-content: space-between;
    } 
    .carousel-indictor li{
      width: 85px;
      background-color: rgba(235, 239, 243);
    }
    .carousel-indictor li.active{
      background-color: #fff;
    }
    .toggle button{
      display: none;
      width: 50px;
      height: 50px;
      background-color: rgba(191, 201, 212,0.5);
      border-radius: 50%;
      color: #fff;
      font-size: 25px;
    }
    .carousel:hover .toggle button{
      display: block;
    }
    .toggle button:hover{
      background-color: rgb(125, 140, 161);
      cursor: pointer;
    }
    .toggle .prev{
      top: 125px;
      left: 30px;
      position: absolute;
    }
    .toggle .next{
      top: 125px;
      right: 30px;
      position: absolute;
    }
  </style>

JS部分

javascript 复制代码
<script>
    const data = [
    {url:'./image/1.png'},
    {url:'./image/2.png'},
    {url:'./image/3.png'},
    {url:'./image/4.png'}
    ]
    const img = document.querySelector('.carousel-wrapper img')
    // 1.右键
    const next = document.querySelector('.next')
    let i = 0
    next.addEventListener('click',function(){
      // console.log(data[i]);
      i++
      i = i>3 ? 0 : i

      img.src=data[i].url
      document.querySelector('.carousel-indictor .active').classList.remove('active')
      document.querySelector(`.carousel-indictor li:nth-child(${i+1})`).classList.add('active')
    })

    // 2.左键
    const prev = document.querySelector('.prev')
    prev.addEventListener('click',function(){
      i--
      i = i<0 ? i=3 : i
      // 图像
      img.src=data[i].url
      // 下划线
      document.querySelector('.carousel-indictor .active').classList.remove('active')
      document.querySelector(`.carousel-indictor li:nth-child(${i+1})`).classList.add('active')
    })

    // 3.定时器
    let timerId = setInterval(function(){
      next.click()
    },1000)
    const carousel = document.querySelector('.carousel')
    carousel.addEventListener('mouseenter',function(){
      clearInterval(timerId)
    })
    carousel.addEventListener('mouseleave',function(){
        timerId= setInterval(function(){
        next.click()
      },1000)
    })

    // 4.经过li时,也对应跳转
    const ul = document.querySelector('.carousel-indictor')
    ul.addEventListener('click',function(e){
      if(e.target.tagName === 'LI'){
        document.querySelector('.carousel-indictor .active').classList.remove('active')
        e.target.classList.add('active')
        // console.log(e.target.dataset.id);
        const i = e.target.dataset.id
        img.src=data[e.target.dataset.id].url
      }
    })
  </script>
相关推荐
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven1 小时前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾1 小时前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我1 小时前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪1 小时前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构