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>
相关推荐
葡萄城技术团队5 分钟前
JavaScript 异步编程指南:async/await 与 Promise 该怎么选?
javascript
Mintopia12 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟16 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia17 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀19 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价19 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
断竿散人21 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript
Point21 分钟前
[ahooks] useEventEmitter源码阅读
前端·javascript·设计模式
讨厌吃蛋黄酥23 分钟前
🚀 为什么 Node.js 正在告别 CommonJS?一文读懂 JavaScript 模块化的前世今生
前端·javascript
挽淚23 分钟前
从原生 DOM 到 React 的全景剖析
javascript