動態圖片切換
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
display: block;
}
</style>
<script>
/**
* 需求
* 點擊下一張按鈕。讓圖片切換成下一張圖
* 點擊上一張按鈕，讓圖片切換成下一張圖
*
* 分析
* 1、獲取下一張按鈕、圖片
* 2、給按鈕添加點擊事件
* 1、用屬性操作的方法去修改圖片的src
* 2、把數字存到一個變量理，點擊下一張，就讓這個變量加1。用字符串拼接的方法修改圖片的
* src屬性
*
* 累加
* n=n+1
* n+=1
* n++
*/
window.onload=function(){
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var pic=document.getElementById("pic");
var n=1;
//console.log(pic); //null
//下一張按鈕點擊事件
next.onclick=function(){
//點擊下一張讓n加個1
//n=n+1;
//n+=1;
n++;
//console.log(n);
if(n>4){
n=4;
alert("已經沒有更多了！");
return;
}
pic.src=‘img/‘+n+‘.jpg‘;
};
//上一張的點擊事件
prev.onclick=function(){
//點上一張按鈕後要讓圖片遞減
n--;
if(n<1){
n=1;
alert("已經沒有更多了！");
return;
}
pic.src=‘img/‘+n+‘.jpg‘;
}
};
</script>
</head>
<body>
<input type="button" id="prev" value="上一張"/>
<input type="button" id="next" value="下一張" />
<img src="img/1.jpg" id="pic" />
</body>
</html>
動態圖片切換