通过js实现简易轮播图的效果
html代码部分
<body>
<div class="slider">
<ul>
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
</ul>
</div>
</body>
CSS部分
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.slider ul{
position: relative;
display: flex;
/* width: 300%; */
}
.slider{
overflow: hidden;
}
.slider ul li img{
width: 100%;
}
.slider .lf_btn{
width: 50px;
position: absolute;
top:180px;
left:3%
}
.slider .rt_btn{
width: 50px;
position: absolute;
top:180px;
right:3%
}
.slider .header{
position: absolute;
最低0.47元/天 解锁文章
1523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
