使用JS实现图片切换

最新推荐文章于 2024-04-30 16:57:21 发布

m0_61505372

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.4k

点赞数 1

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_61505372/article/details/127923010

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近学会了js的图片切换，有点简陋但效果很好

如果使用稍加修改即可，把数组和所有的 "img/1.jpg" 切换为自己的图片路径即可

效果如下：

话不多说上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#a1{
				width: 1000px;
				height: 620px;
				background-color: black;
				border-radius: 2%;
				margin-left: 30%;
				margin-top: 10%;
			}
			img{
				width: 900px;
				height: 500px;
				margin-left: 5%;
				
			}
			button{
				text-align: center;
				margin-left: 30%;
				width: 100px;
				height: 40px;
				font-size: 20px;
				background-color: white;
				border-radius: 10% ;
				font-weight: 800;
			}
			p{
				color: white;
				font-size: 25px;
				text-align: center;
				font-weight: 800; 
			}
			
		</style>
		<script>
			window.onload = function(){
				var img = document.getElementsByTagName("img")[0]
				imglist = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
				
				var btn = document.getElementById("next");
				
				var btn2 = document.getElementById("next2");
				
				var index = 0;
				btn.onclick = function(){
					index--
					if(index<0){
						index = imglist.length -1
					}
					
					img.src = imglist[index] 
					p.innerHTML = "一共有"+imglist.length+"张图片，现在是第"+(index+1)+"张"
				};
				btn2.onclick = function(){
					index++
					if(index>imglist.length-1){
						index = 0;
					}
						img.src = imglist[index];
				p.innerHTML = "一共有"+imglist.length+"张图片，现在是第"+(index+1)+"张"
				}
				
				var p = document.getElementById("P");
				
				p.innerHTML = "一共有"+imglist.length+"张图片，现在是第"+(index+1)+"张"
				
			}
			
			
		</script>
	</head>
	<body>
		
		<div id="a1">
			<p id="P"></p>
			<img src="img/1.jpg" alt="six">
			<br>
			<button id="next">上一页</button>
			<button id="next2">下一页</button>
			
		</div>
	</body>
</html>