JavaScript中运用dom来制作图片轮播

最新推荐文章于 2022-03-08 14:35:06 发布

plannothing

最新推荐文章于 2022-03-08 14:35:06 发布

阅读量336

点赞数

分类专栏： js基础教程文章标签： js javascript html

本文链接：https://blog.csdn.net/plannothing/article/details/107850177

版权

js基础教程专栏收录该内容

101 篇文章 0 订阅

订阅专栏

 !DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#outer{
			width: 500px;
			margin: 50px auto;
			padding: 10px;
			text-align: center;
			background-color: greenyellow;
			
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			/*
			 * 点击按钮切换图片
			 */
			//获取两个按钮
			
			/*
			 * 要切换图片就是要修改img标签的src属性
			 */
			
			//获取img标签
			
			var img = document.getElementsByTagName("img")[0];

// alert(img[0]);

			//创建一个数组，用来保存图片的路径
			
			var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
			
			//创建一个变量，来保存当前正在显示的图片的索引
			
			var index = 0;
			
			//设置提示文字
			//获取id为info的p元素
			
			var info = document.getElementById("info");
			info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			
			
			
			
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");
			
			//分别为两个按钮绑定单击响应函数
			
			prev.onclick = function(){
				
				/*
				 * 切换到上一张，索引自减
				 */
				index--;
				
				//判断index是否小于0
				
				if(index<0){
					
					index = imgArr.length-1;
				}
				
				img.src = imgArr[index];
				info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			};
			
			next.onclick = function(){
				
				/*
				 * 切换到下一张index自增
				 */
				
				index++;
				
				if(index>imgArr.length-1){
					index = 0;
				}
				
				img.src = imgArr[index];
				info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			};
		
		}
	</script>
</head>
<body>
	<div id = "outer">
		<P id = "info"></P>
		<img src = "img/1.jpg" alt = "冰棍"/>
		
		<button id = "prev">上一张</button>
		<button id = "next">下一张</button>
		
	</div>
</body>
</html>