js简单练习
海贼王 图片切换效果图:
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 520px;
height: 757px;
background-color: chartreuse;
padding: 10px;
text-align: center;
}
button{
margin-top: 5px;
font-size: large;
}
</style>
</head>
<body>
<div>
<p id="pp">一共5张图,这是第1张</p>
<img src="./img海贼/01.jpg" alt="路飞">
<button id="shang">上一张</button>
<button id="xia">下一张</button>
</div>
<script>
var arr = ["./img海贼/01.jpg","./img海贼/02.jpg","./img海贼/03.jpg","./img海贼/04.jpg","./img海贼/05.jpg"]
var index=0
//获取两个按钮
var shang = document.getElementById("shang")
var xia = document.getElementById("xia")
var img = document.getElementsByTagName("img")[0];
var pp = document.getElementById("pp")
//绑定单击函数
shang.onclick=function(){
//alert("上一张")
index ++
if(index>4){index=0}
img.src= arr[index]
pp.innerHTML= "一共" + (arr.length) +"张图,这是第"+ (index+1) +"张"
}
xia.onclick=function(){
//alert("下一张")
index --
if(index<0){index=4}
img.src= arr[index]
pp.innerHTML= "一共" +(arr.length) +"张图,这是第"+ (index+1) +"张"
}
</script>
</body>
</html>