第1课--1.2图片切换

最新推荐文章于 2023-09-09 19:45:09 发布

汪超凡

最新推荐文章于 2023-09-09 19:45:09 发布

阅读量240

点赞数

分类专栏：妙味课堂Js基础课后练习文章标签： JS基础妙味课堂课后练习

本文链接：https://blog.csdn.net/wcf1991/article/details/78369449

版权

妙味课堂Js基础课后练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片切换</title>
	<style>
		body,p,input{
			padding:0;
			margin:0;
		}
		a{
			text-decoration:none;
		}
		#wrap{
			width:500px;
			height:560px;
			margin:30px auto;
			text-align:center;
			padding:10px;
		}
		#wrap input{
				width:60px;
				height:30px;
				background-color:#f1f1f1;
		}
		#wrap #for_button{
				width:60px;
				height:30px;
				background-color:yellow;
		}
		#wrap p{
			font:14px/30px "宋体";
		}
		#wrap img{
			width:460px;
			height:460px;
			border:10px solid #ccc
		}
		#left_link{
			padding:10px;
			font:46px/46px "宋体";
			color:#000;
			background-color:white;
			filter:alpha(opacity:50);
			opacity:0.5;
			position:relative;
			top:-260px;
			left:208px;
		}
		#left_link:hover{
			filter:alpha(opacity:30);
			opacity:0.3;
		}
		#right_link{
			padding:10px;
			font:46px/46px "宋体";
			color:#000;
			background-color:white;
			filter:alpha(opacity:50);
			opacity:0.5;
			position:absolute;
			top:314px;
			left:452px;
		}
		#right_link:hover{
			filter:alpha(opacity:30);
			opacity:0.3;
		}
		#pic_number{
			background-color:white;
			color:blue;
			padding:2px 218px;
			filter:alpha(opacity:50);
			opacity:0.5;
			position:absolute;
			left:453px;
			top:110px;
		}
		#pic_prompt{
			background-color:white;
			color:blue;
			padding:2px 198px;
			filter:alpha(opacity:50);
			opacity:0.5;
			position:absolute;
			left:453px;
			top:550px;
		}
	</style>
	<script>
		window.onload = function(){
			var oFor_btn = document.getElementById("for_button");
			var oOrder_btn = document.getElementById("order_button");
			var oPrompt = document.getElementById("prompt");
			var oPic_nmr =document.getElementById("pic_number");
			var oImg = document.getElementById("Img");
			var oPic_prompt = document.getElementById("pic_prompt");
			var Right_link = document.getElementById("left_link");
			var Left_link = document.getElementById("right_link");
			var oOnoff = true;
			var arr = ["../../img/1.jpg","../../img/2.jpg","../../img/3.jpg","../../img/4.jpg"];
			var arr2 = ["图一说明","图二说明","图三说明","图四说明"];
			var number = 0;

			oFor_btn.onclick = function(){
				oPrompt.innerHTML = "图片可从最后一张跳转到第一张循环切换";
				oFor_btn.style.background = "yellow";
				oOrder_btn.style.background = "#f1f1f1";
				oOnoff = true;
			}
			oOrder_btn.onclick = function(){
				oPrompt.innerHTML = "图片只能到最后一张或者到第一张顺序切换";
				oOrder_btn.style.background = "yellow";
				oFor_btn.style.background = "#f1f1f1";
				oOnoff = false;
			}


			Right_link.onclick = function(){
				if(oOnoff){
					if(number == 3){
						number = 0;
						oImg.src = arr[number];
					}else{
						number ++;
						oImg.src = arr[number];
					}

					oPic_nmr.innerHTML = (number + 1) + "/" + arr.length;
					oPic_prompt.innerHTML = arr2[number];

				}else{
					if(number == 3){
						alert("已经到头了！");
						number = 0;
						oImg.src = arr[number];
					}else{
						number ++;
						oImg.src = arr[number];
					}

					oPic_nmr.innerHTML = (number + 1) + "/" + arr.length;
					oPic_prompt.innerHTML = arr2[number];
				
			}
		}

			Left_link.onclick = function(){
				if(oOnoff){
					if(number == 0){
						number = 3;
						oImg.src = arr[number];
					}else{
						number --;
						oImg.src = arr[number];
					}

					oPic_nmr.innerHTML = (number + 1) + "/" + arr.length;
					oPic_prompt.innerHTML = arr2[number];
				}else{
					if(number == 0){
						alert("已经是第一张了！");
						number = 3;
						oImg.src = arr[number];
					}else{
						number --;
						oImg.src = arr[number];
					}

					oPic_nmr.innerHTML = (number + 1) + "/" + arr.length;
					oPic_prompt.innerHTML = arr2[number];
					
				}
			}
				
		}
	</script>

</head>
<body>
	<div id = "wrap">
		<input type = "button" value = "循环切换" id ="for_button"/>
		<input type = "button" value = "顺序切换" id ="order_button"/>
		<p id = "prompt">图片可从最后一张跳转到第一张循环切换</p>
		<span id = "pic_number">1/4</span>
		<img src = "../../img/1.jpg" id = "Img"/>
		<a id = "left_link" href = "#">></a><a id = "right_link" href = "#"><</a>
		<span id = "pic_prompt">图一说明</span>
	</div>
</body>
</html>

下面是图片地址：打开从“http......ter"就可以看到！

汪超凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录