利用css完成轮播图效果方法很简单
一、首先可以给图片盒子加浮动或者flex让其在一行内显示，再给父盒子添加overflow:hidden;属性让超出的图片隐藏起来。
二、利用a标签的跳转效果，给对应的图片盒子设置ID属性值，
将图片盒子的ID属性值加入对应的a标签中的href属性中
例如 <a href="#box1> </a>，
三、当我们点击a标签时，它就会跳转到对应的图片，由此可以完成简单的轮播图效果。
给父盒子添加scroll-behavior: smooth;这个属性可减慢图片跳转速度
下面参考代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 200px auto;
width: 520px;
height: 280px;
border: 1px solid #000;
position: relative;
}
ul {
display: flex;
overflow: hidden;
scroll-behavior: smooth;
}
li {
list-style: none;
}
p {
position: absolute;
bottom: 0;
right: 0;
}
p a {
display: inline-block;
width: 40px;
height: 40px;
color: #fff;
font-size: 20px;
text-decoration: none;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<ul>
<li id="box1"><img src="images/1.jpg" alt=""></li>
<li id="box2"><img src="images/2.jpg" alt=""></li>
<li id="box3"><img src="images/3.jpg" alt=""></li>
</ul>
<p><a href="#box1">1</a><a href="#box2">2</a><a href="#box3">3</a></p>
</div>
</body>
网友评论