冰河世纪

冰河世纪

html:

<div id="box">
<img id="pic" src="images/1.Png" alt="">
</div>

css:

*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
#box{
width: 497px;
height: 207px;
margin: 20px auto 0;
}

js:

// 抓取对象
var pic = document.querySelector('#pic');
console.log(pic)

// 每过0.1秒 ，换一张图
// 定义一个变量，i，表示图的名称（1-19）
var i = 1;
// 定义一个临时变量，temp
var temp = 1;
function change(){
i = i + temp;

if(i==19){
temp = -1;
}
if(i==1){
temp = 1;
}
console.log(i,temp)
pic.src = "images/"+i+".Png";
}
window.setInterval(change,500);

注意：

临时变量的作用