纯css实现轮播图

其他 2018-06-08 05:17:21 阅读次数: 3
轮播图构成：
轮播图一般由logo图片，底部指示器和左右切换按键组成。

难点：如何模拟左右切换按钮的点击事件
大致思路：
1.确定图片的切换方式，使用绝对定位，令三张图片重叠在一起，通过z-index的变化来切换图片。
2、模拟左右切换按键，利用单选框的伪类：checked来模拟点击事件。
3、模拟底部指示器，自定义单选框的样式，使用label标签和伪元素来更改单选框选中时的样式。

html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Stylesheet" type="text/css" href="carousel.css" />
</head>
<body>

<div class="carousel-main">
    <input class="carousel-main_input--a1" type="radio" id="carousel-checkbox1" name="value">
    <input class="carousel-main_input--a2" type="radio" id="carousel-checkbox2" name="value">
    <input class="carousel-main_input--b1" type="radio" id="carousel-checkbox3" name="value" checked="checked">
    <input class="carousel-main_input--b2" type="radio" id="carousel-checkbox4" name="value">
    <input class="carousel-main_input--c1" type="radio" id="carousel-checkbox5" name="value">
    <input class="carousel-main_input--c2" type="radio" id="carousel-checkbox6" name="value">
    <!--两侧控制按钮-->
    <label class="a1_go-3 label label-left" for="carousel-checkbox1"></label>
    <label class="a2_go-2 label label-right" for="carousel-checkbox2"></label>
    <label class="b1_go-1 label label-left" for="carousel-checkbox3"></label>
    <label class="b2_go-3 label label-right" for="carousel-checkbox4"></label>
    <label class="c1_go-2 label label-left" for="carousel-checkbox5"></label>
    <label class="c2_go-1 label label-right" for="carousel-checkbox6"></label>
    <!--/*底部按钮*/-->
    <label class="go-1 circle" for="carousel-checkbox3" ></label>
    <label class="go-2 circle" for="carousel-checkbox2"></label>
    <label class="go-3 circle" for="carousel-checkbox1"></label>
   <!--轮播图片-->
    <img class="carousel_img-1" src="carousel-1.png">
    <img class="carousel_img-2" src="carousel-2.jpeg">
    <img class="carousel_img-3" src="carousel-3.jpg">
    <!--左右空心箭头-->
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>



</div>
</body>
</html>

scss结构

@charset "utf-8";
body{
  margin:0;
}
.carousel-main{
  position: relative;
  width: 100%;
  overflow: hidden;
   .label{
    position: absolute;
    top: 10vw;
    width: 5vw;
    height: 5vw;
  }
  .a1_go-3{
    left: 0;
  }
  .a2_go-2{
    right: 0;
  }
  .b1_go-1{
    left: 0;
  }
  .b2_go-3{
    right: 0;
  }
  .c1_go-2{
    left: 0;
  }
  .c2_go-1{
    right: 0;
  }
  .arrow-left{
    position: absolute;
    top: 11.085vw;
    left: 1rem;
    z-index: 4;
    display: inline-block;
    width: 2vw;
    height: 2vw;
    border-top: 5px solid #999;
    border-right: 5px solid #999;
    pointer-events: none;
    transform: rotate(-135deg);
  }
  .arrow-right{
    position: absolute;
    top: 11.085vw;
    right: 1rem;
    z-index: 4;
    display: inline-block;
    width: 2vw;
    height: 2vw;
    border-top: 5px solid #999;
    border-right: 5px solid #999;
    pointer-events: none;
    transform: rotate(45deg);
  }
}
.label-left:hover ~ .arrow-left{
  border-color: #fff;
}
.label-right:hover ~ .arrow-right{
  border-color: #fff;
}
/* 使用绝对定位隐藏图片，三张图片重叠*/
.carousel-main{
  position: relative;
}
.carousel_img-1{
  width: 100%;
  height: 25vw;
  pointer-events: none;
  transition: all 1s;
}
.carousel_img-2{
  @extend .carousel_img-1;
  position: absolute;
  top: 0;
  z-index: -1;
}
.carousel_img-3{
  @extend .carousel_img-1;
  position: absolute;
  top: 0;
  z-index: -1;
}
/* 隐藏input*/
.carousel-main{
  input{
    display: none;
  }
}

/* 隐藏b,c两组按钮*/
.b1_go-1{
  display: none;
}
.b2_go-3{
  display: none;
}
.c1_go-2{
  display: none;
}
.c2_go-1{
  display: none;
}
/* input控制*/
/* 按钮组*/

/* a1 点击按钮a1后隐藏a1,a2,b1,b2,显示c1,c2,点击按钮a1后显示图片3*/
.carousel-main_input--a1:checked ~ .a1_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--a1:checked ~ .a2_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--a1:checked ~  .b1_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--a1:checked ~  .b2_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--a1:checked ~ .c1_go-2{
  display: block;
  z-index: 3;
}
.carousel-main_input--a1:checked ~ .c2_go-1{
  display: block;
  z-index: 3;
}

.carousel-main_input--a1:checked ~ .carousel_img-3{
  z-index: 2;
}
.carousel-main_input--a1:checked .go-3{
  background: #fff;
}


/* a2 点击按钮a2后隐藏a1,a2,c1,c2,显示b1,b2,.点击按钮a2后显示图片2*/
.carousel-main_input--a2:checked ~ .a1_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--a2:checked ~ .a2_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--a2:checked ~  .c1_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--a2:checked ~  .c2_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--a2:checked ~ .b1_go-1{
  display: block;
  z-index: 3;
}
.carousel-main_input--a2:checked ~ .b2_go-3{
  display: block;
  z-index: 3;
}
.carousel-main_input--a2:checked ~ .carousel_img-2{
  z-index: 2;
}

/* b1 点击按钮b1后隐藏b1,b2,c1,c2,显示a1,a2,点击按钮b1后显示图片1*/
.carousel-main_input--b1:checked ~ .c1_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--b1:checked ~ .c2_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--b1:checked ~  .b1_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--b1:checked ~  .b2_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--b1:checked ~ .a1_go-3{
  display: block;
  z-index: 3;
}
.carousel-main_input--b1:checked ~ .a2_go-2{
  display: block;
  z-index: 3;
}
.carousel-main_input--b1:checked ~ .carousel_img-2,.carousel_img-3{
  z-index: -1;
}

/* b2 点击按钮b2后隐藏a1,a2,b1,b2,显示c1,c2,点击按钮b2后显示图片3*/
.carousel-main_input--b2:checked ~ .a1_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--b2:checked ~ .a2_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--b2:checked ~  .b1_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--b2:checked ~  .b2_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--b2:checked ~ .c1_go-2{
  display: block;
  z-index: 3;
}
.carousel-main_input--b2:checked ~ .c2_go-1{
  display: block;
  z-index: 3;
}
.carousel-main_input--b2:checked ~ .carousel_img-3{
  z-index: 2;
}

/* c1 点击按钮c1后隐藏a1,a2,c1,c2,显示b1,b2,点击按钮c1后显示图片2*/
.carousel-main_input--c1:checked ~ .a1_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--c1:checked ~ .a2_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--c1:checked ~  .c1_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--c1:checked ~  .c2_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--c1:checked ~ .b1_go-1{
  display: block;
  z-index: 3;
}
.carousel-main_input--c1:checked ~ .b2_go-3{
  display: block;
  z-index: 3;
}
.carousel-main_input--c1:checked ~ .carousel_img-2{
  z-index: 2;
}

/* c2 点击按钮c2后隐藏b1,b2,c1,c2,显示a1,a2,点击按钮c2后显示图片1*/
.carousel-main_input--c2:checked ~ .c1_go-2{
  display: none;
  z-index: -2;
}
.carousel-main_input--c2:checked ~ .c2_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--c2:checked ~  .b1_go-1{
  display: none;
  z-index: -2;
}
.carousel-main_input--c2:checked ~  .b2_go-3{
  display: none;
  z-index: -2;
}
.carousel-main_input--c2:checked ~ .a1_go-3{
  display: block;
  z-index: 3;
}
.carousel-main_input--c2:checked ~ .a2_go-2{
  display: block;
  z-index: 3;
}
.carousel-main_input--b1:checked ~ .carousel_img-2,.carousel_img-3{
  z-index: -1;
}

/*底部样式按钮*/
.go-1{
  position: absolute;
  z-index: 4;
  bottom: 1vw;
  left: 47.5%;
  right: 51.5%;
}
.go-2{
  position: absolute;
  z-index: 4;
  bottom: 1vw;
  left: 49.5%;
  right: 49.5%;
}
.go-3{
  position: absolute;
  z-index: 4;
  bottom: 1vw;
  left: 51.5%;
  right: 47.5%;
}
.circle::before{
    display: inline-block;
    content: "";
    width: 1vw;
    height: 1vw;
    border: 1px solid #fff;
    border-radius: 50%;
}
.carousel-main_input--a1:checked ~ .go-3::before {
     background-color: #fff;
}
.carousel-main_input--a2:checked ~ .go-2::before {
  background-color: #fff;
}
.carousel-main_input--b1:checked ~ .go-1::before {
  background-color: #fff;
}
.carousel-main_input--b2:checked ~ .go-3::before {
  background-color: #fff;
}
.carousel-main_input--c1:checked ~ .go-2::before {
  background-color: #fff;
}
.carousel-main_input--c2:checked ~ .go-1::before {
  background-color: #fff;
}

问题讨论

1、轮播图的构成？

答：轮播图一般由logo图片，底部指示器和左右切换按键组成。


2、两种实现方式的优缺点？

答：css轮播，适应性更广，可以在用户禁用js后仍然轮播，平稳退化，但实现完整效果时代码较为复杂。bootstrap轮播，代码简洁，复用性高。


3、如何设计轮播图才能吸引到用户？

答；让轮播图看起来像是站点的一部分，给予清晰的操作反馈和内容预期



PPT链接：https://it-xzy.github.io/WEB-NEW/2018-5-22-C-css14.html

视频链接：https://v.qq.com/x/page/l0662qzgi9q.html


猜你喜欢

转载自blog.csdn.net/tianxintiandisheng/article/details/80375037
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022