原生JS代码编写的简单图片切换

最新推荐文章于 2021-04-01 22:40:42 发布

Factory_MAN

最新推荐文章于 2021-04-01 22:40:42 发布

阅读量188

点赞数 2

分类专栏： JAVAScript 文章标签： js javascript css html html5

本文链接：https://blog.csdn.net/Lay_LQH/article/details/113057761

版权

JAVAScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML样式：
	<body>
		<div id="outer">
			<!--设置提示文字-->
			<p id="info"></p>
			
			<img src="img/zyx1.jpg"/>
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
CSS样式：
	<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#outer{
				width: 640px;
				margin: 50px auto;
				padding: 15px;
				background-color:greenyellow;
				text-align: center;
			}
			img{
				width: 639px;
				height: 450px;	
				display: block;
			}
		</style>
JS代码：
	<script type="text/javascript">
		//获取到各个标签的id
		var prev = document.getElementById("prev");
		var next = document.getElementById("next");
		var img = document.getElementsByTagName("img")[0];
		var info = document.getElementById("info");
		//把五张图片放入到一个数组中
		var imgArry = ["img/zyx1.jpg","img/zyx2.jpg","img/zyx3.jpg","img/zyx4.jpg","img/zyx5.jpg"];
		//定义一个变量用来记录数组的下标
		var index = 0;
		//图片第几张文字提示
		info.innerHTML = "一共"+imgArry.length+"张图片，当前第"+(index+1)+"张图片"; 
		//点击“上一张”按钮的函数
		prev.onclick = function(){
			index--;//每点击一次就让数组索引-1
			//当是第一张时，再点击上一张，会导致索引为负数
			if(index < 0){
				//当到第一张时，如果再点一次“上一张”按钮，让他的索引变回最后一张图片的数组索引
				index = imgArry.length-1;
			}
			//修改属性值，使图片改变
			img.src = imgArry[index];
			//点击按钮的时候，重新设置信息文字提示的信息
			info.innerHTML = "一共"+imgArry.length+"张图片，当前第"+(index+1)+"张图片"; 
		}
		
		next.onclick = function(){
			index++;
			if(index > imgArry.length-1){
				//当到最后一张图片时，如果再点一次“下一张”按钮，让他的数组索引变回第一张图片的数组索引
				index = 0;
			}
			img.src = imgArry[index];
			//点击按钮的时候，重新设置信息文字提示的信息
			info.innerHTML = "一共"+imgArry.length+"张图片，当前第"+(index+1)+"张图片"; 
		}
	</script>

Factory_MAN

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生JS代码编写的简单图片切换

HTML样式： <body> <div id="outer">  <p id="info"></p> <img src="img/zyx1.jpg"/> <button id="prev">上一张</button> <button id="next">下一张</button> </div> &l
复制链接

扫一扫