编程知识 cdmana.com

Introduction to JavaScript - write a photo album for your girlfriend

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

版权声明
本文为[Fertilizer science]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211002145707586x.html

Scroll to Top