javascript 简单点击轮播

最新推荐文章于 2024-04-12 07:49:03 发布

小小阿星

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量245

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_47591145/article/details/110223214

版权

本文介绍了一个简单的图片轮播器的实现方式，使用HTML、CSS和JavaScript构建。通过按钮控制图片的切换，并显示当前浏览的图片序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				// 获取两个按钮
				var prev = document.getElementById("prev")
				var next = document.getElementById("next")
				
				//根据图片标签中src的属性来切换图片
				var img = document.getElementById("img")
				
				// 定义一个数组 用来存储图片地址路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
				
				// 定义一个变量，保存当前图片所在的位置
				var index = 0;
				
				
				var info = document.getElementById("info") 
				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"
				
				// 上一张
				prev.onclick = function(){
					index--;
					if(index<0){
						index = imgArr.length-1
					}
					img.src = imgArr[index]
					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张"
				}
				// 下一张
				next.onclick = 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 id="img" src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>