JavaScript练习--[使用js语言实现网页切换图片的效果]

Posted 2021-06-29 小智RE0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript练习--[使用js语言实现网页切换图片的效果]相关的知识，希望对你有一定的参考价值。

图片切换效果需求;

(1)在网页中设计图片的切换效果;打开网页时,只能看到图片;

(2)当鼠标移到图片上时,两个按钮就会显示出来;

(3)当鼠标点击上;就会切换到上一张图片;点击下;就会切换到下一张图片.

(注:本练习使用的图片大小尺寸一致;均为540X960 大小)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 设置修饰属性 -->
		<style type="text/css">
			/* 首先清除浏览器默认样式 */
			*{
				margin: 0px;
				padding: 0px;
				}
			img{
				display: block;/* 设置图片标签变为块标签 */
			}
			#div01{
				width: 960px;/* 设置宽度 */
				height: 540px;/* 设置高度 */
				margin: auto;/* 设置外边距为自动,居中 */
				position: relative;/* 开启相对定位 */
			}
			/* 按钮的属性和定位 */ 
			#btn01,#btn02{
				width: 25px;
				width: 25px;
				background-color: aqua;
				opacity:0 ;/*透明度为0;隐藏按钮*/
				position: absolute;/* 开启绝对定位 */
				top: 250px; /* 距离父级标签顶部250个像素 */
			}
			#btn02{
			right: 0px;	/* 右边的按钮紧贴图片右边 */
			}	
		</style>
		
		<script type="text/javascript">
			//设置鼠标移入图片操作函数;
			function imgoper1(){
				//获取两个按钮的对象;
				var imgoper01=document.getElementById("btn01");
				var imgoper02=document.getElementById("btn02");
				//设置透明度为1;即绝对显示;
				imgoper01.style.opacity=1.0;
				imgoper02.style.opacity=1.0;
			}
			//设置鼠标移出图片操作函数;
			function imgoper2(){
				//获取两个按钮的对象;
				var imgoper01=document.getElementById("btn01");
				var imgoper02=document.getElementById("btn02");
				//设置透明度为0;即隐藏按钮;
				imgoper01.style.opacity=0;
				imgoper02.style.opacity=0;
			}
			//将图片地址存到一个数组中;
			var imgarray=["./img/fortnite01.jpg","./img/fortnite02.jpg","./img/fortnite03.jpg","./img/fortnite04.jpg","./img/fortnite05.jpg","./img/fortnite06.jpg","./img/fortnite07.jpg","./img/fortnite08.jpg","./img/fortnite09.jpg"];
			//定义图片数组的索引值;
			var index=0;
			//设置按钮操作函数;
			//获取图片的对象;
			var imgobj;
			//按钮1;
			function button01(){
				imgobj=document.getElementById("imgworld");
				index--;
				//每当切换到第一张图片时,点击就会切换到最后一张图片;
				if(index<0){
					index=imgarray.length-1;
					}
				imgobj.src=imgarray[index];		
			}
			//按钮2;
			function button2(){
			    imgobj=document.getElementById("imgworld");
				index++;
				//当切换到最后一张图片时;点击就会切到第一张图片;
				if(index>imgarray.length-1){
				 index=0;	
				}
				imgobj.src=imgarray[index];
			}
		</script>

	</head>
	<body>
		<div id="div01">
			<!-- 第一张图片;鼠标移入后就会显示两个按钮;移出后就会隐藏 -->
			<img id="imgworld"  src="./img/fortnite01.jpg" onmouseover="imgoper1()" onmouseout="imgoper2()"/>
			<!-- 两个按钮分别放在两个块级标签内;按钮1切换上一张图片;按钮2切换下一张-->
			<div id="btn_left"><input  type="button" id="btn01"  onmouseover="imgoper1()" onclick="button01()" value="上<<<"/></div>
			<div id="btn_right"><input type="button" id="btn02"   onmouseover="imgoper1()" onclick="button2()" value="下>>>"/></div>
		</div>
	</body>
</html>