css点击出发轮播代码,css实现图片点击轮播

css实现点击按钮图片轮播

html代码

## css代码

```

body { /*设置边框距离以及背景色*/

margin: 0;

padding: 0;

background-color: #34495e;

}

.slideshow { /设置显示图片的大小，溢出隐藏/

width: 100%;

height: 100%;

overflow: hidden;

}

.middle {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.navigation { /设置绝对位置，弹性布局，按钮位置/

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

display: flex;

}

.bar { /设置按钮属性/

width: 50px;

height: 10px;

border: 2px solid #fff;

margin: 6px;

cursor: pointer; /把鼠标设置为手/

transition: 0.3s; /按钮背景变色时间/

}

.bar:hover {

background: #fff;

}

input[name=“r”] {

position: absolute;

visibility: hidden;

}

.slides {

width: 400%;

height: 100%;

display: flex;

}

.slide {

width: 100%;

transition: 2s;

}

.silde img {

width: 100%;

height: 100%;

}

#r1:checked~ .s1 {

margin-left: 0;

}

#r2:checked~ .s1 {

margin-left: -25%;

}

#r3:checked~ .s1 {

margin-left: -50%;

}

#r4:checked~ .s1 {

margin-left: -75%;

}