1. 激活谷首页
  2. 激活谷笔记

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

• 激活谷笔记

js实现图片数组中图片切换效果这篇文章主要为大家详细介绍了js实现图片数组中图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

写一个图片切换的小案例，巩固一下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>

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

初始界面为

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

点击下一张效果为

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/5327.html

赞 (0)
0
上一篇 2024年 3月 19日
下一篇 2024年 3月 20日

相关推荐

关注微信