当前位置：网站首页>JS picture switching (simple and practical)

JS picture switching (simple and practical)

2022-06-25 12:41:00 【Fall in love with*】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#max {
				margin: 100px auto;
				width: 250px;
				height: 350px;
				border: 1px solid #F5DEB3;
				background-color: #F5DEB3;
				text-align: center;
			}

			div img {
				margin: 15px 15px;
			}

			/* button{
				margin-top:5px;
				margin-left: 50px;
				
			} */
		</style>
	</head>
	<body>
		<div id="max">
			<h3 id="tips"></h3>
			<img src="img/bear/1.jpg" id="img"><br>
			<button id="previous" onclick="pre()"> Previous </button>
			<button id="next" onclick="nex()"> Next </button>

		</div>
		<script type="text/javascript">
			
			
			var a ;
			var prev = document.getElementById("previous");
			var next = document.getElementById("next");
			var img = document.getElementsByTagName("img")[0];
			var imgArr = ["img/bear/1.jpg", "img/bear/2.jpg","img/bear/3.jpg" , "img/bear/4.jpg","img/bear/5.jpg"];
			var index = 0;
						
			function pre(){
				prev.onclick = function(){
					index--;
					if(index<0){
						index=imgArr.length-1;
					}
					document.getElementById("img").src = imgArr[index];
					
					// When you click the button   Reset information 
					document.getElementById("tips").innerText = " Current "+(index+1)+" A picture ";
					
				};
			};									
				
			function nex(){
				next.onclick = function(){
					index++;
					if(index>imgArr.length-1){
						index=0;
					}
					document.getElementById("img").src = imgArr[index];
					document.getElementById("tips").innerText = " Current "+(index+1)+" A picture ";
				};
			};	
				
				
			
		</script>
	</body>
</html>

原网站

版权声明
本文为[Fall in love with*]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202200528160815.html

边栏推荐

猜你喜欢

随机推荐