使用JavaScript实现图片轮播功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46162047/article/details/129376506

先看效果叭：

js实现图片切换

思路：首先图片下方有切换到上一张和下一张的按钮，实现图片切换实际上就是点击相应按钮时（给按钮添加点击事件），图片路径对应改变，也就是img.src属性，但在这里，并不推荐使用改变src属性来切换图片，因为，每点击一次按钮，就要重新给src赋值新的地址，太过麻烦，这里采用将所有的图片路径保存在一个数组中，只要改变数组的索引值，就能实现改变图片的效果。

再看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#pic{
				width: 250px;
				margin: 100px auto;
				text-align: center;
				background-color: pink;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="pic">
			<p id="info"></p>
			<img src="img/摆烂.png">
			<button id="prev">< 上一张</button>
			<button id="next">下一张 ></button>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//先获取到perv和next，再分别给它们添加点击事件
			var prev=document.getElementById("prev");
			var next=document.getElementById("next");
				
			//获取img,修改图片就是修改img的src属性,用img.src="img/哈哈.png";切换到下一张，但这种方法不可取（太麻烦）
			//使用getElementsByTagName获取到的是一个数组，就算获取到一个元素，也会封装到数组中
			var img=document.getElementsByTagName("img")[0];
				
			//创建数组来保存图片路径
			var imgArr=["img/摆烂.png","img/哈哈.png","img/就这.png","img/哭哭.png","img/迷茫.png"];
				
			//创建索引保存正在显示的图片下标，默认第一张，下标为0
			var index=0;
				
			//设置提示文字
			var info=document.getElementById("info");
			//获取info后，用innerHTML为p标签添加文字
			info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";
				
			//分别为两个按钮绑定点击事件
			prev.onclick=function(){
				index--;
				//做判断，如果当前图片是第一张，再点上一张就切换到第五张，让图片可以循环点击
				if(index<0){
					index=imgArr.length-1;
				}
				img.src=imgArr[index];
				//每点击上一张时，提示文字也跟着变
				info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";
			};
				
			next.onclick=function(){	
				index++;
					
				if(index>imgArr.length-1){
						index=0;
				}
				img.src=imgArr[index];
				//每点击下一张时，提示文字也跟着变
				info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";
			};			
		};
	</script>
</html>

js实现图片切换效果