JavaScript实现简单的图片切换功能(实例代码)
更新时间：2020年04月10日 10:37:17 作者：陈太浪
这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 300px;
margin: 50px auto;
padding: 20px;
background-color: skyblue;
text-align: center;
}
img{
width: 200px;
height: 200px;
margin: 20px 0;
}
</style>
<script>
// 存储照片地址的数组
let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];
// 照片的索引
let index = 0;
window.onload = function() {
let oP = document.getElementsByTagName("p")[0];
oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
let oImg = document.getElementsByTagName("img")[0];
let oPrev = document.getElementsByClassName("prev")[0];
let oNext = document.getElementsByClassName("next")[0];
// 点击上一张响应事件
oPrev.onclick = function () {
index--;
//实现照片循环
if (index < 0) {
index = imgArr.length-1;
}
oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
oImg.src = imgArr[index];
};
// 点击下一张响应事件
oNext.onclick = function () {
index++;
//实现照片循环
if (index >= imgArr.length) {
index = 0;
}
oP.innerHTML = "一共有" + imgArr.length + "张照片,这是第" + (index+1) +"张";
oImg.src = imgArr[index];
};
};
</script>
</head>
<body>
<div class="box">
<p></p>
<img src="../../images/animal1.png" alt="">
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
</body>
</html>
最终的效果
总结
到此这篇关于JavaScript实现简单的图片切换功能(实例代码)的文章就介绍到这了,更多相关js 图片切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue+element-plus上传图片及回显问题及数量限制
本文主要介绍了vue+element-plus上传图片及回显问题及数量限制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要给大家介绍了关于vue前端el-input输入限制输入位数及输入规则的相关资料,文中通过代码介绍的介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
这篇文章主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了Vue在外部配置打包文件夹名称和url地址前缀，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
对应前端小白来说,一看到:deep()这些模式的用法就不理解是啥意思,下面简单介绍一下:deep()是什么以及如何使用,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue3实现表格编辑和删除功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
vue composition-api 封装组合式函数的操作方法
在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数，这篇文章主要介绍了vue composition-api 封装组合式函数的操作方法,需要的朋友可以参考下2022-10-10
解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_N
这篇文章主要给大家介绍了关于解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论