本文展示了一个使用JavaScript编写的简单图片轮播效果。通过点击上一张和下一张按钮，可以实现图片在指定路径下的切换，并实时更新当前显示的图片编号。页面结构包括一个外层容器、图片、按钮和信息提示区。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>照片</title>
<script type="text/javascript">
window.onload=function(){
var shang = document.getElementById("shang");
var xia = document.getElementById("xia");
var img =document.getElementsByTagName("img")[0];
var imglist=["../照片/1.jpg","../照片/2.jpg","../照片/3.jpg","../照片/4.jpg","../照片/5.jpg"];
var index=0;
var info=document.getElementById('info')
shang.onclick = function(){
index--;
if(index<0){
index=imglist.length-1
} ;
img.src=imglist[index];
info.innerHTML='一共'+imglist.length+'张图片,当前第'+(index+1) +'张'
}
xia.onclick=function(){
index++;
if(index>imglist.length-1){
index=0
} ;
img.src=imglist[index];
info.innerHTML='一共'+imglist.length+'张图片,当前第'+(index+1) +'张'
}
};
</script>
<style>
*{
padding: 0;
margin: 0;
}
#outer{
width: 500px;
text-align: center;
margin: 50px auto;
border: 20px solid green;
padding: 10px;
background-color: lightcoral;
}
img{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id='outer'>
<p id='info'>一共5张图片,当前第1张</p>
<img src="../照片/1.jpg" alt="1">
<button id='shang'>上一张</button>
<button id='xia'>下一张</button>
</div>
</body>
</html>
扫一扫
3355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
