Java教程

HTML5+CSS+JavaScript基础案例——图片切换

本文主要是介绍HTML5+CSS+JavaScript基础案例——图片切换，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

案例：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		#wai{
			margin: 50px auto;
			border:1px solid;
			width: 200px;
			height: 300px;
			background-color: aqua;
			padding:10px;
			text-align:center;
		}
	</style>
</head>

<body>
	<div id="wai">
		<p></p>
	<img src="拼图效果/01.jpg" alt="1">
	<button id="prev">上一张</button>	
	<button id="next">下一张</button>	
	</div>
	<script>
	var prev=document.getElementById("prev");
	var next=document.getElementById("next");
	var img=document.getElementsByTagName("img")[0];
	
		var arr=["拼图效果/01.jpg","拼图效果/02.jpg","拼图效果/03.jpg","拼图效果/04.jpg","拼图效果/05.jpg","拼图效果/06.jpg"];
		var index=0;
		var p=document.getElementsByTagName("p")[0];
		p.innerHTML="一共"+(arr.length-1)+"张，这是第"+(index+1)+"张"
		prev.onclick=function(){
			index--;
			if(index<0){
				index=arr.length-1;
			}
			img.src=arr[index];
			p.innerHTML="一共"+(arr.length-1)+"张，这是第"+(index+1)+"张"
		};
		next.onclick=function(){
		index++;
			if(index>arr.length-1){
				index=0;
			}
			img.src=arr[index];
			p.innerHTML="一共"+(arr.length-1)+"张，这是第"+(index+1)+"张"
		};
	</script>
</body>
</html>

 

这篇关于HTML5+CSS+JavaScript基础案例——图片切换的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航