css实现图片点击轮播

Love The Way You Lie 2022-01-23 02:07 387阅读 0赞

## 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%;  
\}

css实现图片点击轮播

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS实现图片轮播

相关轮播图实现(含1.自动轮播 2.左右点击轮播 3.图片数点击播放)

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

相关 html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。

相关简单的点击实现图片轮播~

相关 CSS实现图片轮播

相关原生js点击轮播点击切换图片

相关实现简单的轮播点击

相关 css实现图片点击轮播

相关 Js实现图片点击切换与轮播