作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评:
首先css代码
属性,块元素可修改这块
}
#list span{
display: inline-block;
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-weight: bold;
font-size: 100px;
color: #fff;
}
#buttons{
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
#buttons span{
display: inline-block;
width: 15px;
height: 5px;
background: #fff;
margin: 0 10px;
cursor: pointer;
transition: all .5s;
}
#buttons span.on{
height: 20px;
}
.arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 80px;
font-weight: bold;
color: #fff;
opacity: .3;
transition: all .5s;
}
.wrapper:hover .arrow{
opacity: 1;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
然后HTML代码