使用js制作一个图片切换

2022-07-11 22:01:13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    section{
        margin:80px auto;
        width: 400px;
        height: 370px;
        overflow: hidden;
        text-align: center;
        background: #a7a7a7;
        transition: all 1s;
    }
    p{
        display: block;
        width: 400px;
        height: 25px;
        margin: 5px 0;
        background: #000;
        color: white;
        line-height: 25px;
    }
    nav{
        background-size: 100% 100%;
        width: 380px;
        height: 300px;
        margin: 0 auto;
        transition: all 0.25s;
    }
    img{
        width: 380px;
        height: 300px;
    }
    button{
        width: 25px;
        height: 40px;
        font-size: 20px;
        margin-top: 120px;
    }
    button:hover nav,img{
        opacity: 1;
    }
    .a1{
        float: left;
    }
    .a2{
        float: right;
    }
</style>
<body>
<section>
    <p class="p1"></p>
        <nav class="bj">
        <button class="a1"><</button>
        <button class="a2">></button>
        </nav>
    <p class="p2"></p>
</section>

<script>
    function wzzh(a){
        let arr2=["一","二","三","四","五","六","七","八","九","十"];
        if (a<10)
        return arr2[a];
    }
    function wenben(b){return arr3[b];}
    let a1=document.querySelector(".a1");
    let a2=document.querySelector(".a2");
    let bj=document.querySelector(".bj");
    let p1=document.querySelector(".p1");
    let p2=document.querySelector(".p2");
    let arr=[‘img/1.png‘,‘img/2.png‘,‘img/3.png‘,‘img/4.png‘];
    //图片的路径
    let arr3=[
        "XXXXXXXXXXXXXX",
        "YYYYYYYYYYYYYY",
        "ZZZZZZZZZZZZZZ",
        "AAAAAAAAAAAAAA"];
    let count=0;
    let wz,gy;
    bj.style.backgroundImage="url("+arr[count]+")";
    p1.innerHTML="这是第一张图片，一共有四张图片";
    p2.innerHTML=wenben(count);
    a2.addEventListener("click",function a1() {
        count++;
        if (count===arr.length)
            count=0;
        bj.style.backgroundImage="url("+arr[count]+")";
        wz=wzzh(count);
        gy=wzzh(arr.length-1);
        p1.innerHTML="这是第"+wz+"张图片，一共有"+gy+"张图片";
        p2.innerHTML=wenben(count);
    });
    a1.addEventListener("click",function () {
        count--;
        if (count===-1)
            count=arr.length-1;
        bj.style.backgroundImage="url("+arr[count]+")";
        wz=wzzh(count);
        gy=wzzh(arr.length-1);
        p1.innerHTML="这是第"+wz+"张图片，一共有"+gy+"张图片";
        p2.innerHTML=wenben(count);
    });
</script>

</body>
</html>
使用js制作一个图片切换
码农公寓

相关文章
