html轮播左右键,纯css+html左右按钮点击淡出淡入轮播图

一个在培训的兄弟问我轮播图怎么做，是他今晚的作业。我说网上找找就能找到了，然后他说找不到，我就给他发一个demo过去。他说要用纯html+css来实现，我当时就懵逼了！！！纯css+html？点击？淡出淡入轮播图？你们老师布局的作业？真的很懵逼。我问css哪来的点击事件？他说不知道！！！当然！老师都说了要用纯css和html来实现。那肯定是有办法实现的，百度是个神奇的东西。然后我肯定是到百度上去查一下了，哈哈...然后经过百度和自己的思考，最终做出来了这个效果...

废话不多说，上代码：html>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

纯css+html轮播图

*{

margin:0;

padding:0;

}

body{

background:url('./image/bg.jpg') no-repeat;

}

ul,li{

list-style:none;

}

ul{

width:650px;

height:430px;

border:1px solid #000;

background:rgba(255,255,255,0.5);

margin:100px auto;

position: relative;

border-radius: 8px;

overflow: hidden;

}

input[type='radio']{

display: none;

}

.images{

position: absolute;

top:0;

left:0;

width:100%;

height:100%;

opacity: 0;

transition: 1s;

}

ul li:nth-of-type(1)>.images{

opacity: 1;

}

img{

width:100%;

height:100%;

}

.nav label{

width:150px;

height:100%;

line-height:430px;

position: absolute;

z-index:10;

cursor: pointer;

color:#fff;

font-size:100px;

text-align:center;

background:rgba(255,255,255,0.5);

text-shadow:0 0 15px rgb(51,51,51);

opacity: 0;

display: none;

transition: opacity .2s;

touch-callout: none;

}

.nav label:last-child{

right:0;

}

.images:hover+.nav label{

opacity: .5;

}

.nav label:hover{

opacity: .95;

}

ul li:nth-of-type(1)>.nav label{

display: block;

}

#photo3:checked~ .three .images{

opacity: 1

}

#photo3:checked~ .three .nav label{

display: block;

}

#photo2:checked~ .two .images{

opacity: 1

}

#photo2:checked~ .two .nav label{

display: block;

}

•                 

  <

  >

•                 

  <

  >

•                 

  <

  >

效果图：

微信扫码查看本文