js 图片切换练习

最新推荐文章于 2022-04-24 14:23:23 发布

原创最新推荐文章于 2022-04-24 14:23:23 发布 · 281 阅读

2 ·

CC 4.0 BY-SA版权

新人练手专栏收录该内容

16 篇文章

订阅专栏

首先先在<body>里面放置一张图片，并设置两个按钮

<div id="outer">
			<img src="img/1.jpg" alt="奥利奥"/>
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>

然后设置样式

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 600px;
				margin: 30px auto;
				padding: 30px;
				background-color: aliceblue;
				text-align: center；//文本居中
			}
		</style>

点击按钮时切换图片
获取按钮

var prev=document.getElementById("prev");
var next=document.getElementById("next");

img标签要用一个数组对象来保存

/*
				 * 获取img标签
				 */
				var img=document.getElementsByTagName("img")[0];//把第一张取出来
				//创建数组来保存img的路径
				var imgArr=["img/1.jpg","img/2.JPG","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];     
				     
				 //创建一个变量，显示当前正在显示图片的索引
				  var index=0;

为按钮绑定单击响应函数

	     
				prev.function(){
					/*
					 * 切换上一张，索引值自减
					 */
				    index--;
				    if (index<0){
				    	index=imgArr.length-1;
				    	
				    };
					//修改一个元素的属性，就是元素.属性=属性值
					img.src=imgArr[index];
					//点击按钮时，显示提示文字
					 info.innerHTML="一共"+imgArr.length+"张图片，现在是第"+(index+1)+"张";
					
					
				};
				next.function(){
					/*
					 * 切换到下一张图片
					 */
					index++;
					if (index >imgArr.length-1){
						index=0;
					};
					img.src=imgArr[index];
					
					 info.innerHTML="一共"+imgArr.length+"张图片，现在是第"+(index+1)+"张";
				};

设置提示文字时，增加一个id属性，<p id="info"></p>

var info=document.getElementById("info");
 info.innerHTML="一共"+imgArr.length+"张图片，现在是第"+(index+1)+"张";

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>奥利奥</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 600px;
				margin: 30px auto;
				padding: 30px;
				background-color: aliceblue;
				text-align: center;
			}
		</style>
		
		
		<!--  切换图片就是要修改img的src属性-->
		
		<script type="text/javascript">
			window.function(){
				//点击按钮切换图片
				//获取两个按钮
				var prev=document.getElementById("prev");
				var next=document.getElementById("next");
				
				/*
				 * 分别为两个按钮绑定单击响应函数
				 */
				/*
				 * 获取img标签
				 */
				var img=document.getElementsByTagName("img")[0];//把第一张取出来
				//创建数组来保存img的路径
				var imgArr=["img/1.jpg","img/2.JPG","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];     
				     
				 //创建一个变量，显示当前正在显示图片的索引
				  var index=0;
				  
				  /*
				   * 设置提示文字
				   */
				   var info=document.getElementById("info");
				   info.innerHTML="一共"+imgArr.length+"张图片，现在是第"+(index+1)+"张";
				     
				     
				     
				prev.function(){
					/*
					 * 切换上一张，索引值自减
					 */
				    index--;
				    if (index<0){
				    	index=imgArr.length-1;
				    	
				    };
					//修改一个元素的属性，就是元素.属性=属性值
					img.src=imgArr[index];
					//点击按钮时，显示提示文字
					 info.innerHTML="一共"+imgArr.length+"张图片，现在是第"+(index+1)+"张";
					
					
				};
				next.function(){
					/*
					 * 切换到下一张图片
					 */
					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>

效果：
在这里插入图片描述