利用DOM进行照片的切换

上周学习了DOM,学习了怎样进行图片的切换，下面是详细代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#one{width: 500px;text-align: center;margin: 50px auto;background-color: greenyellow;padding: 10px;/*font-size: 30px;*/}img{width: 500px;height: 500px;}</style><script type="text/javascript">window.onload = function(){//获取prev标签var prev = document.getElementById("prev");//获取next标签var next = document.getElementById("next");//获取img标签var img = document.getElementsByTagName("img")[0];/** 要切换图片就是修改img标签的src属性    *///将所有的img放在一个数组var imgArr = ["../img/3_03.jpg" , "../img/3_04.jpg" , "../img/3_05.jpg" , "../img/3_06.jpg"];//创建一个变量，来保存当前正在显示图片的索引var index = 0;//获取id为info的p元素var info = document.getElementById("info");//设置提示文字info.innerHTML = "一共"+(imgArr.length)+"张图片，当前第"+(index+1)+"张";//为prev绑定单机函数prev.onclick = function (){/** 切换上一张，索引自减*/index--;if(index<0){index = imgArr.length-1;}img.src = imgArr[index];info.innerHTML = "一共"+(imgArr.length)+"张图片，当前第"+(index+1)+"张";};//为next绑定单机函数next.onclick = function(){/** 切换下一张，索引自增*/index++if(index>imgArr.length-1){index = 0;}img.src=imgArr[index];info.innerHTML = "一共"+(imgArr.length)+"张图片，当前第"+(index+1)+"张";};}</script></head><body><div id="one"><p id = info></p><img src="../img/3_03.jpg" alt="雪人"/><button id = "prev">上一张</button><button id = "next">下一张</button></div></body>
</html>

转载于:https://www.cnblogs.com/black-lm/p/9352894.html

利用DOM进行照片的切换相关推荐

windows系统和linux系统可以使用相同的js代码吗_使用Sboxr自动发现和利用DOM（客户端）XSS漏洞...
这一系列的博客文章将向你展示如何在单页或富JavaScript的应用程序上识别DOM XSS的问题.作为示例,我们将在DOM XSS playground(https://domgo.at)上解决10 ...
JAVA中利用DOM解析XML文档
JAVA中利用DOM解析XML文档 package org.sws.utils; import java.io.File;import java.io.IOException; import java ...
android 应用切换动画,怎么在Android应用中利用Activity对动画进行切换
怎么在Android应用中利用Activity对动画进行切换发布时间:2020-11-27 16:19:53 来源:亿速云阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android应用 ...
python换照片底色_Python 利用OpenCV给照片换底色的示例代码
OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和M ...
利用手机距离感应器来切换声音听筒播放或声筒播放
一直不擅于来写文章,有时候写的东西,阅读起来,一点都不流畅,但不管如何,任何事情总有一个从0到1的过程.先写,后改.慢慢增进吧. 几年前曾写一篇文章 ,是关于利用手机距离传感器来切换听筒或声筒播放声音 ...
微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
Spring AOP之四：利用AOP实现动态数据源切换
2019独角兽企业重金招聘Python工程师标准>>> 简介和依赖项目的前提是安装了MySQL数据库,并且建立了2个数据库一个是master,一个是slave,并且这2个数据库都有 ...
python利用thinker制作多页面切换的桌面应用实例教程
本篇文章主要讲解,python利用thinker制作多页面的桌面实例教程.可以在一个主界面中相互进行切换和设置相关的表单信息,布局等方法代码片段的实际效果视频演示: python使用thinker ...
在 Perl 中利用 DOM 和 XPath 对 XML 进行有效处理
文在对几个大型 XML 项目进行分析的基础上研究了如何有效且高效地使用 DOM.开发人员兼作者 Tony Daruger 提供了一组用法样式和一个函数库,以使 DOM 强壮和易用.虽然 DOM 提供了 ...

利用DOM进行照片的切换

利用DOM进行照片的切换相关推荐

最新文章

热门文章