切換圖片
<style>
*{
margin:0;
padding:0;
}
#outer{
width:1500px;
margin:50px auto;
padding:20px;
/*文本居中*/
text-align: center;
}
</style>
<script>
window.onload=function () {
// 點擊按鈕切換圖片
//獲取兩個按鈕的地址
var prev=document.getElementById("prev");
var next=document.getElementById("next");
// 要切換圖片就是修改img標簽的src屬性
// 獲取img標簽 只有一個物件提取出來
var img=document.getElementsByTagName("img")[0];
// alert(img);
// 創建一個陣列，用來保存圖片的路徑
var imgArr=['img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];
//創建一個索引
var index=0;
var info=document.getElementById("info");
//設定提示文字
info.innerHTML="一共"+imgArr.length+"張照片，當前第"+(index+1)+"張";
// 為兩個按鈕設定點擊回應函式
prev.onclick=function () {
index--;
//判斷index是否小于0
if(index<0){
index=imgArr.length-1;
}
img.src=https://www.cnblogs.com/huaweimian/p/imgArr[index];
};
next.onclick=function () {
index++;
if(index>imgArr.length-1){
index=0;
}
//要修改一個元素的屬性元素，屬性=屬性值
img.src=https://www.cnblogs.com/huaweimian/p/imgArr[index];
info.innerHTML="一共"+imgArr.length+"張照片，當前第"+(index+1)+"張";
};
}
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/2.jpg" alt="冰"/>
<button id="prev">上一張</button>
<button id="next">下一張</button>
</div>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7226.html
標籤：JavaScript