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

2023-07-02 17:07:08 559人浏览安东尼

摘要

这篇“怎么使用js实现简单的图片切换功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用JS实现简单的图片切换功能”文

这篇“怎么使用js实现简单的图片切换功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用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>

以上就是关于“怎么使用JS实现简单的图片切换功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么使用JS实现简单的图片切换功能

本文链接: https://www.lsjlt.com/news/343433.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341