Introduction to JavaScript - write a photo album for your girlfriend

Fertilizer science 2021-10-14 05:02:33

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

 Insert picture description here
 Insert picture description here
 Insert picture description here

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

Please bring the original link to reprint ,thank
Similar articles

2021-10-14