js学习图片切换练习

最新推荐文章于 2020-10-10 01:20:51 发布

时光不老 ζ

最新推荐文章于 2020-10-10 01:20:51 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/qq_49934059/article/details/108244904

版权

图片切换练习

<!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;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var prev = document.getElementById("prev");
				
				var next = document.getElementById("next");
				
				var index = 0;
				
				var info = document.getElementById("info");
							
				var img = document.getElementById("img");
				
				var imgArry = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" , "img/5.jpg"];
				
				info.innerHTML = "一共"+imgArry.length+"张图片，当前第"+(index + 1) +"张。";
				
				
	            
				prev.onclick = function(){
					index--;
					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>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img id="img" src="img/1.jpg" alt="图片"/>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>			
		</div>
	</body>
</html>

时光不老 ζ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习图片切换练习

图片切换练习<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; paddi
复制链接

扫一扫