Html5+JavaScript轮播图实现方式

这…足够应付大学老师的作业了 /偷笑

这应该是大学JavaScript老师常布置的js作业之一,只做了三个图片,可以修改图片和尺寸,修改好名字之后替换即可,如果要添加第四张图片所有的px都要修改.一开始就是用三张图片做的,就没弄四张照片

图片自己找吧,

样式图
可以很丑,但是姿势要帅
下面是代码
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	
	<body>
		<div id="box">
			<div id="imgbox">
				<img src="img/1.jpg"/>
				<img src="img/2.jpg"/>
				<img src="img/3.jpg"/>
			</div>
			<div id="img1box">
				<img id="img-1" src="img/up.png"/>
				<img id="img-2" src="img/down.png"/>
			</div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	
	<script type="text/javascript" src="js/lb.js"></script>
	
</html>

main.css

#box{
	height: 250px;
	width: 600px;
	border: 5px solid black;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}
#imgbox{
	height: 250px;
	width: 1800px;
	position: absolute;
}
#imgbox>img{
	height: 250px;
	width: 600px;
	float: left;
}
#img1box{
	width: 100%;
	height: 40px;
	position: absolute;
	top: 40%;
}
#img1box>img{
	height: 100%;
	width: 60px;
}
#img-1{
	position: absolute;
	left: 20px;
}
#img-2{
	position: absolute;
	right: 20px;
}
ul{
	width: 200px;
	height: 20px;
	list-style: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 220px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
li{
	width: 20px;
	height: 20px;
	float: left;
	background: none;
	border: 2px solid limegreen;
	border-radius: 50%;
}

lb.js


	var imgbox=document.getElementById("imgbox");
	var li=document.getElementsByTagName("li");
	
	
	//点击控制
	li[0].style.background="lime";     //默认的显示第一页  将第一个圆圈改色
	li[0].onclick=function(){  		   //点击第一个标签
		this.style.background="lime";  //给第一个标签改色
		imgbox.style.left="0";	       //进行图片的轮播
		li[1].style.background="";     //   将其他两个标签除色
		li[2].style.background="";
	}
	li[1].onclick=function(){
		this.style.background="lime";
		imgbox.style.left="-600px";
		li[0].style.background="";
		li[2].style.background="";
	}
	li[2].onclick=function(){
		
		this.style.background="lime";
		imgbox.style.left="-1200px";
		li[1].style.background="";
		li[0].style.background="";
	}
	
	
	var up=document.getElementById("img-1");
	var down=document.getElementById("img-2");
		
	//上一页 下一页控制
	up.onclick=function(){
		var y=imgbox.offsetLeft;     //获取当前显示页,
		if(y>-600)                   //判定是否需要从第一页跳转到最后一页
		{
			y=-1800;
		}
		var x=y+600;
		imgbox.style.left=x+"px";     //图片轮播
		//判断当前显示页 修改标签颜色
		if(x==0)
		{
			li[0].style.background="lime";
			li[1].style.background="";
			li[2].style.background="";
		}
		if(x==-600)
		{
			li[0].style.background="";
			li[1].style.background="lime";
			li[2].style.background="";
		}
		if(x==-1200)
		{
			li[0].style.background="";
			li[1].style.background="";
			li[2].style.background="lime";
		}
	}
	down.onclick=function(){
		var y=imgbox.offsetLeft;
		if(y<-600)
		{
			y=600;
		}
		var x=y-600;
		imgbox.style.left=x+"px";
		switch (x)
		{
			case 0:
				li[0].style.background="lime";
				li[1].style.background="";
				li[2].style.background="";
				break;
			case -600:
				li[0].style.background="";
				li[1].style.background="lime";
				li[2].style.background="";
				break;
			case -1200:	
				li[0].style.background="";
				li[1].style.background="";
				li[2].style.background="lime";
				break;
		}

	}

Html5+JavaScript轮播图实现方式

猜你喜欢