Reading guide
Learn in your spare time js Those who are interested in studying together can talk about me in private ！ Let's discuss our experience .
Exhibition
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#img{
height: 400px;
text-align: center;
padding: 30px;
background: #f6e77f;
}
#img img{
height: 200px;
padding:0;
margin: 30px;
padding: 15px;
background: #f36f31;
}
#img button{
color: aliceblue;
background: black;
}
#img span{
color: #FFF;
background: #73B6C6;
border-radius: 20px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
overflow: hidden;
margin: 30px 0;
}
#foot{
text-align: center;
color: black;
}
</style>
</head>
<body>
<div id="img">
<span id="numPhotos"> Baby album </span>
<br>
<img src="img/1.png" alt="1" />
<br>
<button id="prev"> Previous </button>
<button id="next"> Next </button>
</div>
<div id="foot">
<hr/>
<h5> Love you, baby </h5>
</div>
<script type="text/javascript">
var arrimg=["img/1.png","img/2.png","img/3.png","img/5.png"];
var ans=0;
var fei=document.getElementById('prev');
var img=document.getElementsByTagName('img')[0];
var info=document.getElementById('numPhotos')
fei.onclick=function () {
ans--;
if(ans<0){
alert(" There's no more ahead ")
ans=0;
}
img.src=arrimg[ans];
info.innerText=' Baby, there are '+arrimg.length+' A picture , This is the first '+(ans+1)+" Zhang "
}
var xue=document.getElementById('next');
xue.onclick=function () {
ans++;
if(ans>2){
alert(" There's no more in the back ")
ans=arrimg.length-1;
}
img.src=arrimg[ans];
info.innerText=' Baby, there are '+arrimg.length+' A picture , This is the first '+(ans+1)+" Zhang "
}
</script>
</body>
</html>
Source code and data collection
版权声明
本文为[Fertilizer science]所创，转载请带上原文链接，感谢
https://cdmana.com/2021/10/20211002145707586x.html
