js简单实现切换图片上一张下一张功能是什么_js中图片切换效果怎么实现

全栈程序员站长

发布于 2022-11-17 10:42:50

9.1K0

大家好，又见面了，我是你们的朋友全栈君。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>照片点击切换</title>
</head>
<style>
*{ 

margin:0;
padding:0;
}
#picBox{ 

margin:100px auto;
width:600px;
height:400px;
}
#pic{ 

width:600px;
height:400px;
}
#buttonBox{ 

width:150px;
margin:10px auto;
}
</style>
<body>
<div id="picBox">
<img src="1.jpg" id="pic">
<div id="buttonBox">
<input type="button" value="上一张" onclick="pre();">
<input type="button" value="下一张" onclick="next();">
</div>
</div>
<script>
var picArr=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
var index=0;
function next(){ 

index++;
if(index==picArr.length){ 

index=0;
}
document.getElementById("pic").src=picArr[index];
}
function pre(){ 

index--;
if(index<0){ 

index=picArr.length-1;
}
document.getElementById("pic").src=picArr[index];
}
</script>
</body>