下面是一个完整制作轮播图的代码
lunbo.css
<style>
body {
margin: 0 auto;
width: 800px;
}
.box {
width: 600px;
height: 420px;
position: relative;
overflow: hidden;
}
.leftBox {
display: none;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: green;
top: 200px;
border: 1px solid #000;
border-radius: 50%;
z-index: 1;
}
.rightBox {
display: none;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: green;
top: 200px;
left: 560px;
border: 1px solid #000;
border-radius: 50%;
z-index: 2;
}
ul {
width: 600%;
position: absolute;
top: 0;
left: 0;
/* 去掉ul前面自带的空格 */
padding-left: 0;
}
li {
float: left;
list-style: none;
}
img {