使用纯CSS实现图片轮播效果

首先我们来看一下所实现轮播图的最终效果：

轮播图 效果

接下来为html+css代码部分：

以下为HTML代码部分：

以下为CSS代码部分：

*{

margin:0;

padding:0;

}

.banner{

position:relative;

width:300px;

height:300px;

margin:50px auto;

border:5px solid lightcoral;

overflow:hidden;

}

.banner ul{

width:900px;

padding:0;

transition:all 1s;

}

.banner li{

list-style:none;

width:300px;

height:300px;

float:left;

}

.circle{

position:absolute;

bottom:10px;

left:92px;

}

.circle label{

display:inline-block;

width:20px;

height:20px;

border-radius:50%;

background:lightcoral;

margin:0 10px;

position:relative;

cursor:pointer;

}

.circle label::after{

content:'';

width:30px;

height:30px;

background:lightsalmon;

border-radius:50%;

position:absolute;

top:-5px;

left:-5px;

opacity:0;

}

#put1:checked~.circle label:first-of-type::after,

#put2:checked~.circle label:nth-of-type(2)::after,

#put3:checked~.circle label:nth-of-type(3)::after{

opacity:1;

}

#put1:checked~ul{

margin-left:0;

}

#put2:checked~ul{

margin-left:-300px;

}

#put3:checked~ul{

margin-left:-600px;

}

.left_arrow label{

display:inline-block;

width:24px;

height:44px;

top:50%;

left:0%;

margin-top:-22px;

position: absolute;

}

/* 圆点的put1,put2,put3和箭头的put1,put2,put3是相互联系的，同时受input制约 */

#put1:checked~.left_arrow label:nth-of-type(3),

#put2:checked~.left_arrow label:nth-of-type(1),

#put3:checked~.left_arrow label:nth-of-type(2){

margin-left:20px;

cursor:pointer;

background:url(../img/ban_prev.png) no-repeat center center;

}

.right_arrow label{

display:inline-block;

width:24px;

height:44px;

top:50%;

right:0%;

margin-top:-22px;

position: absolute;

}

#put1:checked~.right_arrow label:nth-of-type(2),

#put2:checked~.right_arrow label:nth-of-type(3),

#put3:checked~.right_arrow label:nth-of-type(1){

margin-right:20px;

cursor:pointer;

background:url(../img/ban_next.png) no-repeat center center;

}

以下为我所使用的图片素材文件，有需要可自取(均为png格式)：

箭头图片素材1(透明)

箭头图片素材2(透明)

first.png

second.png

third.png

keep learning

转载请注明来源