1.首先要一组图片(锅打灰太狼)
将图片名称命名为h[0-9].png,方便后期操作
2.创建一个div用来存放img图片。
<div class="box2">
</div>
3.js主要用到创建定时器,和去除定时器,内有详解
<script type="text/javascript">
// 获取.box2
var box2 = document.querySelector('.box2');
//创建img
var img = document.createElement('img');
//图片下标
var index = 0
// 将img添加到box2中
box2.appendChild(img);
// 创建动画定时器
ImgHtl = setInterval(function() {
//判断图片下标是否大于5
if (index < 5) {
//每循环一次加一
index++;
img.src = "./img/h" + index + ".png";
} else {
//移除上升定时器
clearInterval(ImgHtl);
// 创建下降定时器
ImgHtl2=setInterval(function(){
if(index>0){
index--;
img.src = "./img/h" + index + ".png";
}else{
img.remove();
clearInterval(ImgHtl2);
}
},150)
}
}, 150)
</script>
版权声明:本文为Wennsai原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。