图片轮播与交互实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46507557/article/details/116136288

图片路径自己改下就可以了

<style>
			*{
				margin:0; 
				padding:0;
			}
			#outer{
				width: 700px; 
				margin:80px auto;
				padding:10px;
				background-color: #5F9EA0;
				text-align: center;
			}
		</style>

<script>
			//用数组存储图片，方便访问
			var arry = new Array("../img/01.jpeg","../img/02.jpeg","../img/03.jpeg");
			//onload-->等页面加载完才执行js代码
			window.onload = function(){
				//点击按钮切换图片
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				//定义一个自变量用来访问数组
				var index = 0;
				//获取img标签(详细看document.getElemetsByTagName)
				//(因为document.getElemetsByTagName返回的是数组，又因为 img只有一个元素
				//所以就直接返回img的第一个元素，就是下标[0])
				var img = document.getElementsByTagName("img")[0];
				
				//分别为两个按钮绑定点击函数
				//上一张
				prev.onclick = function(){
					index--;
					if(index < 0)
						index = arry.length-1;
					img.src = arry[index];
					//文字设置
					info.innerHTML = "一共"+arry.length+"张,我是第"+(index+1)+"张";
				};
				
				//下一张
				next.onclick = function(){
					index++;
					if(index > arry.length-1)
						index = 0;
					img.src = arry[index];
					//文字设置
					info.innerHTML = "一共"+arry.length+"张,我是第"+(index+1)+"张";
				};
				
				//切换图片就是要修改元素的属性
				//要修改一个元素属性--->元素.属性=属性值;
				
				//设置提示文字部分
				//获取id为info的p元素
				//这玩意应该点击按钮后就执行，所以要放入到点击事件中去
				//info.innerHTML = "一共"+arry.length+"张我是第"+index+"张";
				
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		
	</head>
	<body>
		<div id="outer">
			<p id="info">共3张，第1张</p>
			<img src="../img/01.jpeg"/>
			
			<p>
				<button id="prev" >上一张</button>
				<button id="next">下一张</button>
			</p>
			
		</div>
	</body>
</html>


-->

1.图片的切换
 1.1获取图片HTML元素
 1.2将要修改的图片属性用数组保存
 1.3一些逻辑
2.获取按钮
	2.1绑定事件用以操作
3.提示文本
	3.1获取文本的id
	3.2设置提示文本的部分
4.多加复习