html实现开关,纯css实现开关、轮播

css样式：/* 基本样式 */

* {

margin: 0px;

padding: 0px;

}

ul,

li {

list-style: none;

}

img {

width: 100%;

display: block;

}

input {

display: none;

}

label {

display: inline-block;

width: 10px;

height: 10px;

border: #fff 3px solid;

}

#main {

margin:10% auto;

width: 700px;

height: 380px;

overflow: hidden;

position: relative;

}

#btn {

position: absolute;

bottom: 15px;

z-index: 5;

left: 50%;

transform: translateX(-50%);

cursor: pointer;

}

ul {

width: 2800px;

position: absolute;

z-index: 1;

transition: 1s

}

li {

float: left;

width: 700px;

}

/* 实现点击轮播 */

/* 按钮变色 */

input#one:checked~#btn label:first-child {

background-color: #000000;

}

input#two:checked~#btn label:nth-child(2) {

background-color: #000000;

}

input#three:checked~#btn label:nth-child(3) {

background-color: #000000;

}

input#four:checked~#btn label:nth-child(4) {

background-color: #000000;

}

/* 换图 */

input#one:checked~ul {

left: 0%;

}

input#two:checked~ul {

left: -100%;

}

input#three:checked~ul {

left: -200%;

}

input#four:checked~ul {

left: -300%;

}

html：

• 
• 
• 
• 

实现思路:

核心：“:checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。”

然后input绑定label for联动，input放在外层父元素里面最上面，就是为了能通过css选择器选中ul标签，然后通过点击label实现单选框的选中状态，

然后用：checked来选择ul的左偏移实现轮播效果，当然，给ul标签加点过渡时间就有过渡动画了。