利用js来实现简单图片切换

3403771864 发布于2022-10-26 22:37 / 666人阅读

　　利用js来实现简单图片切换怎么做？直奔主题吧。

　　我们要说下代码的主要思路：

　　1、先给“下一张”和“上一张”两个按钮绑定单击响应事件；

　　2、获取img标签对象，用于修改src属性的值，实现图片的切换；

　　3、切换图片实质上就是修改img标签里面src属性的值；

　　4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可；

　　5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单；

　　6、需要注意的是，如果当前显示的图片为最后一张时，下一张使它自动跳回第一张；同理如果当前显示的图片为第一张时，上一张使它自动跳回最后一张；

　　7、设置顶部的文字先要获取对应的p标签对象；

　　8、通过修改p标签里面的文字就可以实现顶部文字的实时变换；

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>图片切换练习</title>
　　<style type="text/css">
　　* {
　　margin: 0;
　　padding: 0;
　　}
　　#outer {
　　width: 500px;
　　margin: 50px auto;
　　padding: 30px;
　　background-color: aquamarine;
　　}
　　</style>
　　<script type="text/javascript">
　　window.onload = function () {
　　/**
　　* 点击按钮实现图片的切换
　　*/
　　//3、获取img标签
　　var img = document.getElementsByTagName("img")[0];
　　//5、创建一个数组用于保存图片的路径
　　var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
　　//6、创建一个变量保存当前正在显示的图片的索引
　　var index = 0;//默认显示的是第一张
　　//8、获取id为info的元素
　　var info = document.getElementById("info");
　　//9、设置提示文字
　　info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
　　//1、给上一张按钮绑定单击事件
　　var prev = document.getElementById("prev");
　　prev.onclick = function () {
　　//7、当索引为第一张时，那么就要将索引设置为最后一张，由于采用的是--index，所以将index设置为5
　　if (index == 0) {
　　index = 5;
　　}
　　index = index - 1;
　　//4、切换图片，实质上就是修改img里面的src属性
　　img.src = imgArr[index];
　　//9、设置提示文字
　　info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
　　}
　　//2、给下一张按钮绑定单击事件
　　var next = document.getElementById("next");
　　next.onclick = function () {
　　//7、当索引为最后一张时，那么就要将索引设置为第一张，由于采用的是++index，所以将index设置为-1
　　if (index == 4) {
　　index = -1;
　　}
　　index = index + 1;
　　//4、切换图片，实质上就是修改img里面的src属性
　　img.src = imgArr[index];
　　//9、设置提示文字
　　info.innerHTML = "一共" + imgArr.length + "张图片， 这是第" + (index + 1) + "张";
　　}
　　}
　　</script>
　　</head>
　　<body>
　　<div id=outer>
　　<p id=info></p>
　　<img src="img/1.jpg" alt="冰棍"/><br/>
　　<button id="prev">上一张</button>
　　<button id="next">下一张</button>
　　</div>
　　</body>
　　</html>

　　完成后的效果：实际就是在每次点击下一张或者上一张会实现图片的切换，同时顶部的提示文字也会随之发生改变。

内容已讲完，更多实操各位自己动手操作吧。

GPU云服务器云服务器简单js焦点切换代码 js 实现视频切换 js实现tab切换 js图片切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128214.html

编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

txgcwm 2019-08-26 11:46 评论0 收藏0
编写简单i18n库

摘要：因为两次的开发维护体验产生了对比，使我产生了不小的兴趣假设一个简单的页面需要多语言。两个简单的区别就是和替换的区别。样式模式其实就是简单的切换。当修改的某个值时，会触发对应的，并发射信号通知节点去更新。 i18n是什么？i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）是国际化的简称。前言第一次接触多语言是用野生javascri...

DevWiki 2019-08-01 18:35 评论0 收藏0
Vue一个案例引发「动画」的使用总结

摘要：既然我们知道了方法，我们就来给它加一个简单的动画。动画中还给我们提供了一些钩子函数，我们可以使用钩子函数构建动画。它会告知我们的动画完成，我们绑定了为，告诉组件跳过的检测，使用。项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。对，你说的没错...

liuchengxu 2019-08-23 13:43 评论0 收藏0
vue全家桶仿某鱼部分布局以及功能实现

摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。前言每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...

dreamGong 2019-08-23 11:01 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0