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

最新推荐文章于 2024-06-27 12:49:37 发布

小智RE0

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量1.5k

点赞数 5

分类专栏：练习文章标签： js javascript

本文链接：https://blog.csdn.net/MrTumnus/article/details/118029646

版权

练习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

图片切换效果需求;

(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>

效果:

图片效果

优化

实现自动切换图片效果,且鼠标放置在图片上时,停止自动切换;同时图片两边出现按钮;点击即可进行执行手动切换图片效果

代码部分:

<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 ;
				position: absolute;/* 开启绝对定位 */
				top: 250px; /* 距离父级标签顶部250个像素 */
			}
			#btn02{
			right: 0px;	/* 右边的按钮紧贴右边 */
			}	
		</style>
		
		<script type="text/javascript">
			//将图片地址存到一个数组中;
			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];
			}
			//自动切换图片效果;
			var r;
			function auto(){
				//设置计时器,6秒执行一次;
				r=setInterval("button2()",6000);
			}
			//设置鼠标图片透明度显示函数;
			function imgoper(transparency){
				document.getElementById("btn01").style.opacity=transparency;
				document.getElementById("btn02").style.opacity=transparency;
				//当按钮透明度为1时;(即按钮完全显示时,停止计时器)
				if(transparency==1.0){
					clearInterval(r);
				}
				//当按钮隐藏时,重新启动计时器;
				else{
					auto();
				}
			}
		</script>
	</head>
	<!--在加载出页面时就运行自动切换图片-->
	<body onload="auto()">
		<div id="div01">
			<!-- 第一张图片;鼠标移入后就会显示两个按钮;移出后就会隐藏 -->
			<img id="imgworld"  src="./img/fortnite01.jpg" onmouseover="imgoper(1.0)" onmouseout="imgoper(0)"/>
			<!-- 两个按钮分别放在两个块级标签内;按钮1切换上一张图片;按钮2切换下一张-->
			<div id="btn_left"><input  type="button" id="btn01"  onmouseover="imgoper(1.0)"  onmouseout="imgoper(0)"   onclick="button01()" value="上<<<"/></div>
			<div id="btn_right"><input type="button" id="btn02"  onmouseover="imgoper(1.0)"  onmouseout="imgoper(0)"  onclick="button2()"  value="下>>>"/></div>
		</div>
	</body>
</html>