html5中轮播条的制作,利用CSS中input制作开关、轮播图

1.利用input制作开关

吃饭

睡觉

打豆豆

以上是常用的input复选框用法。

我们可以利用复选框点击—选中，再点击-不选中的特点制作开关。

开关效果，里面不仅有效果图，也有代码，左上角的html和css可以点击查看喔！！！！

2.利用input制作轮播图

男

女

以上是常用的input单选框用法。

我们可以利用单选框只能选中其中一个制作轮播图。

轮播图效果

由于代码比较长，就粘贴下。

input{

display: none;

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

#box{

width: 500px;

height: 500px;

margin: 0 auto;

border:5px solid black;

/*超出部分隐藏*/

overflow: hidden;

position: relative;

text-align: center;

}

.list{

/*让ul横着排放超出box*/

width: 400%;

/*利用position：absolute不占位*/

position: absolute;

/*过渡执行时间为1s*/

transition:1s;

}

.list li{

float:left;

width: 500px;

height: 500px;

}

label{

width: 10px;

height: 10px;

border-radius: 50%;

border: 5px solid white;

position: absolute;

bottom:40px;

z-index: 2;

}

/*设置每个圆圈的位置*/

label:nth-of-type(1){

left:180px;

}

label:nth-of-type(2){

left:220px;

}

label:nth-of-type(3){

left:260px;

}

label:nth-of-type(4){

left:300px;

}

input:checked+label{

background:black;

}

/*选中移动ul*/

input:nth-of-type(1):checked~ul{

left:0;

}

input:nth-of-type(2):checked~ul{

left:-100%;

}

input:nth-of-type(3):checked~ul{

left:-200%;

}

input:nth-of-type(4):checked~ul{

left:-300%;

}