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

r囧r小猫 2022-10-07 08:52 388阅读 0赞

使用纯CSS实现图片轮播效果

首先我们来看一下所实现轮播图的最终效果：

![03d7fc1b7850][]

轮播图 效果

接下来为html+css代码部分：

以下为HTML代码部分：

*  ![first.png][]
 *  ![second.png][first.png]
 *  ![third.png][first.png]

以下为CSS代码部分：

\*\{

margin:0;

padding:0;

.banner\{

position:relative;

width:300px;

height:300px;

margin:50px auto;

border:5px solid lightcoral;

overflow:hidden;

.banner ul\{

width:900px;

padding:0;

transition:all 1s;

.banner li\{

list-style:none;

width:300px;

height:300px;

float:left;

.circle\{

position:absolute;

bottom:10px;

left:92px;

.circle label\{

display:inline-block;

width:20px;

height:20px;

border-radius:50%;

background:lightcoral;

margin:0 10px;

position:relative;

cursor:pointer;

.circle label::after\{

content:'';

width:30px;

height:30px;

background:lightsalmon;

border-radius:50%;

position:absolute;

top:-5px;

left:-5px;

opacity:0;

\#put1:checked~.circle label:first-of-type::after,

\#put2:checked~.circle label:nth-of-type(2)::after,

\#put3:checked~.circle label:nth-of-type(3)::after\{

opacity:1;

\#put1:checked~ul\{

margin-left:0;

\#put2:checked~ul\{

margin-left:-300px;

\#put3:checked~ul\{

margin-left:-600px;

.left\_arrow label\{

display:inline-block;

width:24px;

height:44px;

top:50%;

left:0%;

margin-top:-22px;

position: absolute;

/\* 圆点的put1,put2,put3和箭头的put1,put2,put3是相互联系的，同时受input制约 \*/

\#put1:checked~.left\_arrow label:nth-of-type(3),

\#put2:checked~.left\_arrow label:nth-of-type(1),

\#put3:checked~.left\_arrow label:nth-of-type(2)\{

margin-left:20px;

cursor:pointer;

background:url(../img/ban\_prev.png) no-repeat center center;

.right\_arrow label\{

display:inline-block;

width:24px;

height:44px;

top:50%;

right:0%;

margin-top:-22px;

position: absolute;

\#put1:checked~.right\_arrow label:nth-of-type(2),

\#put2:checked~.right\_arrow label:nth-of-type(3),

\#put3:checked~.right\_arrow label:nth-of-type(1)\{

margin-right:20px;

cursor:pointer;

background:url(../img/ban\_next.png) no-repeat center center;

以下为我所使用的图片素材文件，有需要可自取(均为png格式)：

![03d7fc1b7850][]

箭头图片素材1(透明)

![03d7fc1b7850][]

箭头图片素材2(透明)

![03d7fc1b7850][]

first.png

![03d7fc1b7850][]

second.png

![03d7fc1b7850][]

third.png

keep learning

转载请注明来源

[03d7fc1b7850]: /images/20221005/cd44646e5dfc4eefa251c5f6c26fdf64.png
[first.png]:

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

发表评论取消回复

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

相关阅读

相关纯css轮播图

相关 HTML/CSS 锚点轮播图

相关 CSS+JS 实现--点击切换轮播图（简单小程序）

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

相关轮播图实现html,html、css、js实现轮播图

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

相关纯css自动全屏轮播图html代码,纯HTML和CSS实现JD轮播图效果

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

相关纯css实现轮播图

相关纯css3实现的轮播图效果（表单制作轮播图）