js实现基本图片切换功能

1.首先我们写个基本样式：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div img {
                width: 323px;
                border: pink solid 15px;
            }

            .outer {
                width: 353px;
                margin: 0 auto;
            }

            .outer .left {
                float: left;
            }

            .outer .right {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <img id="img" src="img/1.jpg" alt="美女">
            <button class="left">上一张</button>
            <button class="right">下一张</button>
        </div>
    </body>
</html>

如图所示：

33

2.我们在img文件夹下面多放几张图片，然后把路径写入一个数组中，开始编写js代码

<script>
    window.onload = function (){
        // 存放图片路径的数组
        let src = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
        // 访问下标
        let i = 0;
        // 获取一组button
        let elementsByTagName = document.getElementsByTagName("button");
        // 获取需要改变的图片地址
        let elementById = document.getElementById("img");
        // 遍历button元素
        for (let elementsByTagNameElement of elementsByTagName) {
            elementsByTagNameElement.onclick =function () {
                if(elementsByTagNameElement.innerHTML === "上一张"){
                        // 防止下标为负数
                        if (i===0){
                            i=src.length-1;
                            elementById.src = src[i]
                        }else{
                            i--;
                            elementById.src = src[i]
                        }
                }if(elementsByTagNameElement.innerHTML==="下一张"){
                    // 防止下标越界
                    if(i === src.length-1){
                        i=0;
                        elementById.src = src[i]
                    }else{
                        i++;
                        elementById.src=src[i];
                    }
                }
            }
        }
    }
</script>

运行即可

posted @ 2021-07-24 13:18  JamieChyi  阅读(21)  评论(0)    收藏  举报  来源