HTML+CSS动画打造酷炫轮播图！（含源码）

<div class="slider">
          <div class="slider-wrapper">
            <img src="./img/1.png" alt="" />
          </div>
          <div class="slider-footer">
            <p>标题1</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>

* {
          box-sizing: border-box;
        }
     
        .slider {
          width: 560px;
          height: 400px;
          overflow: hidden;
          margin-left: 300px;
        }
     
        .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;
        }

// 1. 初始数据
const sliderData = [
{ url: './img/1.png', title: '标题1', color: 'rgb(100, 67, 68)' },
{ url: './img/2.png', title: '标题2', color: 'rgb(43, 35, 26)' },
{ url: './img/3.png', title: '标题3', color: 'rgb(36, 31, 33)' },
{ url: './img/4.png', title: '标题4', color: 'rgb(139, 98, 66)' },
{ url: './img/5.png', title: '标题5', color: 'rgb(67, 90, 92)' },
{ url: './img/6.png', title: '标题6', color: 'rgb(166, 131, 143)' },
{ url: './img/7.png', title: '标题7', color: 'rgb(53, 29, 25)' },
{ url: './img/8.png', title: '标题8', color: 'rgb(99, 72, 114)' },
]
//获取元素
const img = document.querySelector('.slider-wrapper img')
const p =document.querySelector(' .slider-footer p ')
const footer = document.querySelector(' .slider-footer ')
//1.右按钮业务
//1.1 获取右侧按钮
const next = document.querySelector('.next')
let i =0
//1.2注册点击事件
next.addEventListener('click',function(){
  i++
  i = i >= sliderData.length ? 0: i
  toggle()
})
const prev = document.querySelector('.prev')
//1.2注册点击事件
prev.addEventListener('click',function(){
  i--
  i = i<0 ? sliderData.length-1 : i;
  
  toggle()
})
//声明一个渲染的函数作为复用
function toggle(){
  img.src = sliderData[i].url;
  p.innerHTML = sliderData[i].title;
  footer.style.backgroundColor = sliderData[i].color
  //1.5更换小圆点 先移除原来的类名，当前li再添加 这个类名
  document.querySelector(' .slider-indicator .active ').classList.remove('active')
  document.querySelector( ` .slider-indicator li:nth-child(${i+1}) ` ).classList.add('active')
}
//3.自动播放模块
let timerId = setInterval(function(){
  //利用js自动调用点击事件
  next.click()
},2000)
//4.鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter',function(){
  clearInterval(timerId)
})
//5.鼠标离开大盒子，停止定时器
const slider1 = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseleave',function(){
  clearInterval(timerId)
  //开启定时器
  timerId = setInterval(function(){
  //利用js自动调用点击事件
  next.click()
},2000)
})