前端通过图片切换实现动画效果

最新推荐文章于 2024-06-07 16:01:04 发布

来一颗砂糖橘

最新推荐文章于 2024-06-07 16:01:04 发布

阅读量1.9k

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_42554330/article/details/130753205

版权

代码

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    #big-main{
      width: 100px;
      height: 200px;
    }
    img{
      max-width: 100%;
      max-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="big-main">
    <img class="img-box" src="image/SunFlower0001.png" alt="">
  </div>
</body>
<script>
    const config = {
        kcid: 'kui',
        name: '向日葵',
        image: 'image/SunFlower0001.png',
        zSize: 25,//动画一共有多少帧，(用多少张图片组成这个动画效果)
        scount: 100,//切换下一帧图片的间隔为100毫秒
        imgClass: '.img-box'
    }
    setInterval(()=>{
        changeImg(config)
    }, config.scount)
    
    /** 切换下一张图片 */
    function changeImg(item){
        const block = item.image.indexOf('.')//找到a.svg中点的位置
        const beforeSrc = item.image.slice(0, block-4)//文件名
        const afterSrc = item.image.slice(block)//后缀名
        let centerSrc = item.image.slice(block-4, block)//这里里取到文件名PeaShooter0001.svg的0001
        let count = Number(centerSrc)+1// 文件名转换成数字型防止变成字符串拼接('0001'+1=>00011) +1表示切换为下一张图片
        if(count>item.zSize){
          count = 1
        }
        centerSrc = String(count)
        // 这里保证0001切换下一张的时候，变成0002而不是2
        if(centerSrc.length==1){
          centerSrc = '000'+centerSrc
        }
        if(centerSrc.length==2){
          centerSrc = '00'+centerSrc
        }
        if(centerSrc.length==3){
          centerSrc = '0'+centerSrc
        }
        // 最后拼接处理后的路径
        config.image = beforeSrc+ centerSrc + afterSrc
        console.log('当前图片路径', config.image)
        document.querySelector(item.imgClass).setAttribute('src', config.image)
    }
</script>
</html>