版权声明:本文为博主原创,未经允许不得转载 https://blog.csdn.net/qq_37282601/article/details/85049461
这…足够应付大学老师的作业了 /偷笑
这应该是大学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;
}
}