Web 以交互方式显示一组图片

Web 以交互方式显示一组图片用JavaScript 以交互方式显示一组图片...

菇毒

1370人浏览 · 2022-01-20 23:23:24

菇毒 · 2022-01-20 23:23:24 发布

Web 以交互方式显示一组图片

1. 准备图片和 js 文件
- 1.1 将图片放在 image 目录下
- 1.2 下载好 js 脚本文件
2. 代码实现
3. 完整代码如下

1. 准备图片和 js 文件

1.1 将图片放在 image 目录下

20211227

1.2 下载好 js 脚本文件

点此下载，提取码：fmpg
将下载好的 js 文件放到项目中的某个目录下
20211227

2. 代码实现

2.1 引用 js 文件

<script type="text/javascript" src="js/jquery.js"></script>

2.2 引用部分

		#big{
			width: 300px;height: 200px;
			margin: 30px auto;	/*水平居中*/
		}
		#r1{
			width: 300px;height: 170px;}
		#r2{
			width: 300px;height: 30px;
			line-height: 30px;
			text-align: center;
		}
		#m1{
			color: blue;
			}
		#m2{
			color: red;		/*序号颜色*/
			}

2.3 主体部分

<div id="big">
			<div id="r1">
				<img src="time_2_1/image/01.png" width="300" height="170" id="tpk"/>
			</div>
			<div id="r2">
				<input type="button" value="上一张" id="rf" />
				共有<span id="m1"></span>张&nbsp;&nbsp;当前序号：<label id="m2"></label>
				<input type="button" value="下一张" id="ff" />
			</div>
		</div>

2.4 js 部分

// 注册页面加载就绪事件函数
	$(document).ready(function(){
		var tp=new Array(6);		//实例化一个数组
		// tp数组中存放6张图片的位置
		var tp=["time_2_1/image/01.png","time_2_1/image/02.png","time_2_1/image/03.png","time_2_1/image/04.png","time_2_1/image/05.png","time_2_1/image/06.png"];
		var next=$("#ff");	//下一幅按钮
		var last=$("#rf");	//上一幅按钮
		// 初始化，表示处于第一张图片（对应于数组的下标 0)
		var index=0;
		$("#m1").text(tp.length);		//局部刷新文本
		// document.getElementById("msg1").innerText=tp.length;	//js用法
		if(tp.length==1){
			// 设置不可用
			next.attr("disabled",true);
			last.attr("disabled",true);
		}
		setButtonState();
		//定义按钮是否可用和当前序号的公共函数
		function setButtonState(){
			index == 0?last.css("display","none"):last.css("display","inline");		//设置是否可见
			index == tp.length-1?next.attr("disabled",true):next.removeAttr("disabled");	//设置可用
			$("#m2").html(index+1);	//局部刷新文本
			//document.getElementById("msg2").innerText=index+1;
		}
		next.click(function(){
			// 注册按钮事件函数+
			index++;
			tpk.src=tp[index];
			setButtonState();
		});
		last.click(function(){
			// 注册按钮事件函数-
			index--;
			tpk.src=tp[index];	//标签属性，不同于 JQuery 对象属性操作
			setButtonState();
		});
	});

3. 完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>以交互方式显示一组图片</title>		
	</head>
	<!-- 引用js文件 -->
	<script type="text/javascript" src="./time_2_1/js/jquery.js"></script>
	<style>
		#big{
			width: 300px;height: 200px;
			margin: 30px auto;	/*水平居中*/
		}
		#r1{
			width: 300px;height: 170px;}
		#r2{
			width: 300px;height: 30px;
			line-height: 30px;
			text-align: center;
		}
		#m1{
			color: blue;
			}
		#m2{
			color: red;		/*序号颜色*/
			}
	</style>
	<body>
		<div id="big">
			<div id="r1">
				<img src="time_2_1/image/01.png" width="300" height="170" id="tpk"/>
			</div>
			<div id="r2">
				<input type="button" value="上一张" id="rf" />
				共有<span id="m1"></span>张&nbsp;&nbsp;当前序号：<label id="m2"></label>
				<input type="button" value="下一张" id="ff" />
			</div>
		</div>
	</body>	
	<script>
	// 注册页面加载就绪事件函数
	$(document).ready(function(){
		var tp=new Array(6);		//实例化一个数组
		// tp数组中存放6张图片的位置
		var tp=["time_2_1/image/01.png","time_2_1/image/02.png","time_2_1/image/03.png","time_2_1/image/04.png","time_2_1/image/05.png","time_2_1/image/06.png"];
		var next=$("#ff");	//下一幅按钮
		var last=$("#rf");	//上一幅按钮
		// 初始化，表示处于第一张图片（对应于数组的下标 0)
		var index=0;
		$("#m1").text(tp.length);		//局部刷新文本
		// document.getElementById("msg1").innerText=tp.length;	//js用法
		if(tp.length==1){
			// 设置不可用
			next.attr("disabled",true);
			last.attr("disabled",true);
		}
		setButtonState();
		//定义按钮是否可用和当前序号的公共函数
		function setButtonState(){
			index == 0?last.css("display","none"):last.css("display","inline");		//设置是否可见
			index == tp.length-1?next.attr("disabled",true):next.removeAttr("disabled");	//设置可用
			$("#m2").html(index+1);	//局部刷新文本
			//document.getElementById("msg2").innerText=index+1;
		}
		next.click(function(){
			// 注册按钮事件函数+
			index++;
			tpk.src=tp[index];
			setButtonState();
		});
		last.click(function(){
			// 注册按钮事件函数-
			index--;
			tpk.src=tp[index];	//标签属性，不同于 JQuery 对象属性操作
			setButtonState();
		});
	});
	</script>
</html>