图片轮播+css动画做轮播进度条demo

1、整体思路

• 图片轮播：通过修改class属性，控制显示隐藏
• 进度条：通过控制dom的宽度，加上css动画效果实现

2、HTML

<div id="counter">
    <div id="list" style="left:0px;">
        <img class="product-active" src="./photo.webp" alt="1">
        <img class="product-inactive" src="./sansan.jpeg" alt="2">
        <img class="product-inactive" src="./sansan1.jpeg" alt="3">
        <img class="product-inactive" src="./xiamu.jpeg" alt="4">
        <img class="product-inactive" src="./sansan.jpeg" alt="5">
        <img class="product-inactive" src="./sansan1.jpeg" alt="6">
    </div>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

3、JavaScript

基本纯靠js写效果：

• 鼠标移入的时候，遍历图片，这里是设定的1500毫秒，修改class。product-active（展示）product-inactive（隐藏）
• 同时根据图片的个数，计算出需要多少时间，给dom设置动画

document.getElementsByClassName('progress-bar')[0].style.animationDuration = (imgList.length)*1500 + 'ms'

• 鼠标移出时，展示第一张图，其他图片隐藏
• 鼠标移出时将动画去除

<script type="text/javascript">
    var counter = document.getElementById("counter");
    var list = document.getElementById("list");
    var timer;

    //鼠标移入时，开始设置元素的显示隐藏
    function animals(offset) {
        var imgList = list.getElementsByTagName('img')
        for(let i = 0; i<imgList.length; i++){
          if(imgList[i].getAttribute('class') == 'product-active'){
            if(i!=imgList.length-1){
              console.log('normal');
              imgList[i].setAttribute('class','product-inactive')
              imgList[i+1].removeAttribute('class')
              imgList[i+1].setAttribute('class','product-active')
            } else {
              console.log('again');
              imgList[i].setAttribute('class','product-inactive')
              imgList[0].removeAttribute('class')
              imgList[0].setAttribute('class','product-active')
            }
            return
          }
        }
    }
      // 进度条
      function progressF(){
        var imgList = list.getElementsByTagName('img')
        document.getElementsByClassName('progress-bar')[0].style.animationDuration = (imgList.length)*1500 + 'ms'
        document.getElementsByClassName('progress-bar')[0].style.animationName = 'backgroundAnimation'
      }
    // 开始定时器
    function start() {
        progressF()
        timer = setInterval(function () {
                animals()
        }, 1500);
    }
    // 鼠标移出时
    function stop() {
        // 关闭定时器
        clearInterval(timer);
        // 关闭动画（默认一直循环）
        var imgList = list.getElementsByTagName('img')
        document.getElementsByClassName('progress-bar')[0].style.animationDuration = ''
        document.getElementsByClassName('progress-bar')[0].style.animationName = ''
        document.getElementsByClassName('progress-bar')[0].style.animationIterationCount = ''
        // 展示第一张图片
        for(let i = 0; i<imgList.length; i++){
            if(i == 0){
                imgList[i].setAttribute('class','product-active')
            } else {
                imgList[i].removeAttribute('class')
                imgList[i].setAttribute('class','product-inactive')
            }
        }
    }
    // 鼠标移出时,开始定时器
    counter.onmouseleave = stop;
    // 鼠标移入时,关闭定时器
    counter.onmouseenter = start;
</script>