亲宝软件园·资讯

展开

js图片切换效果

蓝胖胖。 人气:0

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

方法:将图片放入数组中首先给img一个初始值,使用index存放当前被点击图片的下标,当再一次点击时,下标+1赋值给数组下标,利用setAttribute()方法给img标签设置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 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("src", imgArr[index])

        }

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

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

初始界面为

点击下一张效果为

加载全部内容

相关教程
猜你喜欢
用户评论