脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS图片切换功能

使用JS实现简单的图片切换功能

 更新时间：2022年07月13日 14:25:38   作者：@派大星@  
这篇文章主要为大家详细介绍了使用JS实现简单的图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了使用JS实现简单的图片切换的具体代码，供大家参考，具体内容如下

效果如图：

分析：首先为按钮添加单击响应事件，然后构造函数。
其实切换图片就是切换img标签src的属性，可以获取标签属性然后进行修改即可。
可以把属性值存放在一个数组中，通过数组的索引来获取。

附上相关代码：

css部分代码：

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
        }
        #a{
        margin: 50px auto;
        width: 500px;
        padding: 15px;
        text-align: center;
        background-color: #99FF99;
                
    }
</style>

js代码：

<script>
    window.onload=function(){
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var img = document.getElementsByTagName("img")[0];
        //构建一个数组存图片
        var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
        var index = 0;
        //console.log(src);
        var p = document.getElementById("b");
                
                btn1.onclick = function(){
                    //alert("1");
                    //img.src="img/2.jpg"
                    index--;
                    if (index<0){
                        index = imgArr.length-1
                    }
                    img.src=imgArr[index]
                    p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
                };
                btn2.onclick = function(){
                    //alert("2");
                    index++;
                    if (index>4){
                        index = 0;
                    }
                    img.src=imgArr[index]
            p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
        };
    };
</script>

body部分：

<body>
   <div id="a">
    <img src="img/1.jpg" alt="雪糕" />
    <button id="btn1">上一张</button>
    <button id="btn2">下一张</button>
    <p id="b">共5张图片，当前第1张</p>
   </div>
        
</body>

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

您可能感兴趣的文章:

相关文章

最新评论