js实现图片数组中图片切换效果

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。

方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置class="lazy" data-src属性。上一张效果反之，代码如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        img {
            width: 400px;
            height: 400px;
            display: block;
        }
    </style>
    <body>
        <img class="lazy" data-src="../imgs/t11.jpg" alt="" id="img">
        <button type="button" id="prev">上一张</button>
        <button type="button" id="next">下一张</button>
    </body>
    <script type="text/javascript">
        var imgs = document.getElementById("img")
        var nextBtn = document.getElementById("next")
        var prevBtn = document.getElementById("prev")


        var imgArr = [
            "../imgs/t11.jpg",
            "../imgs/doraemon.jpg",
            "../imgs/peiqi.jpg",
            "../imgs/qiang.jpg"
        ]
        var index = 0;

        nextBtn.onclick = function() {
            index++;

            if (index > imgArr.length - 1) {

                index = 0
            }
            imgs.setAttribute("class="lazy" data-src", imgArr[index])

        }

        prevBtn.onclick = function() {
            index--
            if (index < 0) {
                index = imgArr.length - 1
            }
            imgs.setAttribute("class="lazy" data-src", imgArr[index])
        }
    </script>
</html>

实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张

初始界面为