- 代码
<!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,
imgClass: '.img-box'
}
setInterval(()=>{
changeImg(config)
}, config.scount)
function changeImg(item){
const block = item.image.indexOf('.')
const beforeSrc = item.image.slice(0, block-4)
const afterSrc = item.image.slice(block)
let centerSrc = item.image.slice(block-4, block)
let count = Number(centerSrc)+1
if(count>item.zSize){
count = 1
}
centerSrc = String(count)
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>
- 图片资源如下25张
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/69a4c8e42b6970e365ce42bfb39b9e8e.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d92ccff0bdb1028f0340b8d2c249d833.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f33e0e044407755507035cc759407ec7.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/10492d160583c42572050076ea74e425.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/55939ab97c60d75e079da8ac1ecfe5db.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2348fed394690bc3496e7b01aeaf514f.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/03b380d9cd59bbe1b5c3d0ded989afb7.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a390901db644eafad7f142997ac33d76.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c9929f88fb80c302a2d3b8412bae66c2.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7ba7361cb93ab2019b6e18ffd7285fa6.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c49f1343f29310cba2f3def429287a74.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c573a93977e6ae20d5c212607fdf493c.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/cf462a9f8e14e637ecdbfda30e362a88.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8d61960076aed300bf26b37e09cc5ae3.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f77d524cf1b8c9b0a976affd7b770988.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/51ed67f2a9a6a3cce221609efa3a80a9.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/65cb6ba8295dffddd6f819a9a036fd4c.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/abe3bb91c2b039bb90151e6deb66837a.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c3d48348f8cc67814fc1cd9bc500eb98.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5b799dbe928031debe1defe506582d13.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/beaa14cb308b79ac91a671fa79998a4e.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9e891568431b05188a173bb9b063e200.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/acb99eca1634f92822df94dec11ed6b7.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/28f62dd778c7ed5edd5d76ec7478bb7a.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0319e60364515de2464bcfc54c8db6f2.png#pic_center)