常见网页轮播图(图片幻灯片),自动轮播,且带有前后按钮和圆点播放按钮(圆点显示图片交替状态)。
此文旨在通过opacity属性实现幻灯片功能,实现banner图轮替播放。
.slide {
position: relative;
width: 100%;
height: 600px;
}
.banner {
position: relative;
width: 1280px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.banner-item {
position: absolute;
top: 0;
left: 0;
width: 1280px;
height: 500px;
opacity: 0;
}
.banner-item-img {
width: 100%;
height: 100%;
}
.switch-btn {
position: absolute;
bottom: 40px;
right: 310px;
}
.indicator {
width: 90px;
height: 10px;
position: absolute;
bottom: 114px;
right: 330px;
}
.indicator-circle {
display: inline-block;
width: 10px;
height: 10px;
float: left;
margin-right: 8px;
border-radius: 50%;
background: rgb(216, 111, 24, .5);
cursor: pointer;
}
.active {
background: rgb(255, 241, 233);
}
<div class="slide">
<div class="banner">
<div class="banner-item"