2、纯 css 实现轮播图(手动)
实现原理:利用 css3 中 input:checked 和 + ~选择器实现
/* 设置容器大小*/
.container {
position: relative;
width: 800px;
height: 300px;
}
/* 设置input位置 */
.container input {
position: absolute;
z-index: 23;
bottom: 10px;
}
/* 设置input位置 */
#pic1 {
left: 48%;
}
#pic2 {
left: 50%;
}
#pic3 {
left: 52%;
}
/* 设置图片大小,透明度为0 */
.wrap img {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
/* 默认选中第一张,根据选中的input,展示对应的图片 */
#pic1:checked ~ .wrap img:nth-of-type(1),
#pic2:checked ~ .wrap img:nth-of-type(2),
#pic3:checked ~ .wrap img:nth-of-type(3) {
opacity: 1;
animation: showImg linear 1s 1 0s normal;
}
/* 设置图片展示出来时候的动画 */<