使用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
当前世界上有很多种浏览器，除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器，有时候我们需要判断浏览器与版本方便后续的操作，一句话浏览器的兼容性太差了，缺少标准2014-05-05
本文主要介绍了jsonp跨域请求实现示例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了js获取当月最后一天实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了JavaScript实现下拉菜单的显示和隐藏的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了JavaScript实现音乐导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念、原理、定义及使用方法,需要的朋友可以参考下2018-12-12
下面小编就为大家带来一篇基于javascript中的typeof和类型判断(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JS正则截取两个字符串之间及字符串前后内容的方法,结合实例形式简单分析了JS正则截取字符串操作的常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2017-01-01
JavaScript字符串处理之trim()和replace()详解
这篇文章主要给大家介绍了关于JavaScript字符串处理之trim()和replace()的相关资料,文中介绍的所有这些方法都不会修改原始字符串,而是返回一个新的字符串,需要的朋友可以参考下2024-10-10
最新评论