IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 编写JavaScript程序实现:图像浏览器的功能 -> 正文阅读

[JavaScript知识库]编写JavaScript程序实现:图像浏览器的功能

编写JavaScript程序实现:图像浏览器的功能,如下图:

?代码实现:

<!doctype html>
<html lang="en">
 <head>
  <title>图片浏览器</title>
 </head>
 <body>
  <table>
  <tr>
	<td><input type="button" value="第一幅" id="1"></td>
	<td><input type="button" value="前一幅" id="2"></td>
	<td><input type="button" value="后一幅" id="3"></td>
	<td><input type="button" value="最后一幅" id="4"></td>
  </tr>
</table>
	<img src="8483763.jpg" width="250" height="180" id="img">//设置默认为第一幅图片
<script>
  var count=0;
  	var imgName=["8483763.jpg","8492815.jpg","8500947.jpg"];//图片路径可自行更改,该处使用的为相对路径
	    var t1=document.getElementById("1");
        var t2=document.getElementById("2");
		var t3=document.getElementById("3");
		var t4=document.getElementById("4");

		var img=document.getElementById("img");
		//后一张
		t3.onclick=function(){
			count++;
            if (count>=imgName.length) {
				count=0;//从0开始
          }
            img.src=imgName[count];           
        };
		  //前一张
		t2.onclick=function(){
			count--;
            if (count<0) {
               count=imgName.length-1;//从0开始
            }
            img.src=imgName[count];           
        };
		  //第一张
		t1.onclick = function () {
			count=0;
			img.src=imgName[count];
		};
		//最后一张
		t4.onclick = function () {
			count=imgName.length-1;
			img.src=imgName[count];
		};
       </script>
 </body>
</html>

显示效果:

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-27 11:15:01  更:2022-04-27 11:15:44 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:40:48-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码