Java Web-----轮播图的实现_javaweb轮播图-CSDN博客

本文详细介绍了使用HTML、CSS和JavaScript实现轮播图的方法。包括图片板块和按钮板块的样式设置，左右按钮的相对定位，以及动画效果的添加。通过具体的代码示例，展示了如何控制图片切换和按钮响应。

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

轮播图的实现可以用多种方法，只用CSS可以实现，用Javascript也可以实现。
不过实现出来的效果也是多种多样的。
这篇是用Javascript对轮播图的实现

轮播图的实现

图片板块
a. 首先，开辟一轮播图存放的板块，用ul，li来实现图片的存放

b.确保ul的长度放的下这5张图，并修改样式，使得图片水平排列并去除ul，li的样式等
按钮板块的样式
a.设置与图片数量相等的按钮，首先设置按钮的样式，使其大小合适，并更改其样式为圆形（通过设置其圆角边值50%）等
css：
html：

在这里插入图片描述
b.将按钮相对于图片定位至图片下方，调整大小及背景颜色

添加左右按钮
a.左右按钮的相对定位于图片板块的两端，并设置样式
html:

css:

动画的添加(见代码)
a.图片的动画
b.按钮的动画
c.左右按钮的动画

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>轮播</title>
	<style type="text/css">
	.center{
		width: 500px;
		height: 300px;
		margin: auto auto;
		padding: 0;
		position: relative;
		text-decoration: none;
		border:1px solid gray;
		overflow: hidden;
	}
	.small{
		height:12px;
		width: 100px;
		padding: 0;
		position: absolute;
		text-decoration: none;
		bottom: 0;
		left: 220px;
	}
	.button{
		width: 12px;
		height:12px;
		text-decoration: none;
		margin-right: 8px;
		display: block;
		background: rgba(0,0,0,.5);
		border-radius: 50%;
		float: left;

	}
	.button:hover{
		background: green;
	}
	#left{
		width: 20px;
		height: 50px;
		position: absolute;
		left: 0;
		top: 120px;
		background: rgba(80,80,80,.5);
		line-height: 50px;
		text-align: center;
		color: #fff;
		z-index: 3;
	}
	#right{
		width: 20px;
		height: 50px;
		position: absolute;
		right: 0px;
		top: 120px;
		background: rgba(80,80,80,.5);
		line-height: 50px;
		text-align: center;
		color: #fff;
		z-index: 3;
	}
	.big{
		width: 2500px;
		height: 300px;
		padding: 0;
		margin: 0;
		list-style: none;
		position:absolute;
		left:0px;
	}
	.img{
		width: 500px;
		height: 300px;
		float: left;
		padding: 0;
		margin: 0;
	}
	.img img{
		width: 100%;
		height: 100%;
	}
	
	.left:hover{
		color: green;
	}
	.right:hover{
		color: green;
	}
	

	</style>


</head>
<body>
	<div class="center">
		<ul class="big">
			<li class="img" value="0"><img src="img/1.jpg"/></li>
			<li class="img" value="1"><img src="img/2.jpg"/></li>
			<li class="img" value="2"><img src="img/3.jpg"/></li>
			<li class="img" value="3"><img src="img/4.jpg"/></li>
			<li class="img" value="4"><img src="img/5.jpg"/></li>
		</ul>
		<ul class="small">
			<li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="0"><a></a></li>
			<li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-1"><a></a></li>
			<li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-2"><a></a></li>
			<li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-3"><a></a></li>
			<li class="button" onmouseover="f2(this)" onmouseout="f3(this)" value="-4"><a></a></li>
		</ul>
		<div id="left"><</div>
		<div id="right" onclick="f1()">></div>
	</div>
	<script type="text/javascript">
	var imgul = document.getElementsByClassName("big")[0];
	var buttonal = document.getElementsByClassName("small")[0];

	var left = document.getElementById("left");
	var right = document.getElementById("right");

	var index = 1;
	buttonshow(index);
	left.onclick=function(){
		var offset;
		if(imgul.offsetLeft=="0"){
			offset = -2000;
		}else{
		var offset = parseInt(imgul.offsetLeft)+500;}
		imgul.style.left=offset+'px';

		if(index==1){
			index=6;
		}
		index=index-1;
		buttonshow(index);
	}
	function f1(){
		var offset;
		if(imgul.offsetLeft=="-2000"){
			offset = 0;
		}else{
		var offset = parseInt(imgul.offsetLeft)-500;}
		imgul.style.left=offset+'px';

		if(index==5){
			index=0;
		}
		index=index+1;
		buttonshow(index);
		console.log(imgul.style.left);
	}
	function buttonshow(index){
		var buttonindex = parseInt(index)-1;
		var buttons = document.getElementsByClassName("button");
		for(var i = 0;i<buttons.length;i++){
			if(i==buttonindex){
				buttons[i].style.background='red';
			}
			else{
				buttons[i].style.background='rgba(0,0,0,.5)';
			}
		}
	}
	var timer=null;
	timer = setInterval(f1,1500);
	function f2(a1){
		a1.style.background='red';
		var flag = parseInt(a1.value)*500;
		imgul.style.left=parseInt(flag)+'px';
		
	}
	function f3(a1){
		a1.style.background='rgba(0,0,0,.5)';
	}

	</script>
</body>
</html>