欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯CSS实现轮播图(附代码详细注释)

程序员文章站 2024-03-17 22:04:34
...

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现轮播图</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <ul class="slides">
       <!-- 加入三个按钮,用于控制轮播图的切换 ,设定相同的name,这样就可以将它们归纳为同一组按钮-->
       <!-- 第一个按钮加入checked,默认选中 -->
       <!-- radio按钮要写在上面,因为可以通过radio:checked判断已选择的radio按钮,再通过通用兄弟选择器~找到它同一层之后的元素
        而css只能找之后同一层的元素,不能找之前同一层的元素,所以radio要写再前面
     -->
       <input type="radio" name="control" id="control-1" checked>
       <input type="radio" name="control" id="control-2">
       <input type="radio" name="control" id="control-3">
        
       <li class="slide">1</li>
       <li class="slide">2</li>
       <li class="slide">3</li>

       <!-- label来控制按钮,目的是为了自定义样式 -->
       <div class="controls-visible">
        <label for="control-1"></label>
        <label for="control-2"></label>
        <label for="control-3"></label>
    </div> 
   </ul>
</body>

</html>

CSS部分


*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
ul.slides{
    position: relative;
    width: 600px;
    height: 280px;
    list-style: none;
    background-color: skyblue;
    /* 将突出的第二和第三张图隐藏 */
    overflow: hidden; 
}
li.slide{
    width: inherit; 
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Helvetica;
    font-size: 120px;
    color: rgb(196, 21, 21);
    transition:  .5s transform ease-in-out;
}

/* 加入三个选择器,分别设置三张轮播图的背景颜色 */
/* :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. */
.slide:nth-of-type(1){
    background-color: #ccc;
}
.slide:nth-of-type(2){
    background-color: khaki;
    /* 第二张图要在第一张图的右边,所以可以设置为left:100% */
    left:100% 
    }
.slide:nth-of-type(3){
    background-color: rgb(134, 93, 124);
    left:200%
}
/* 属性选择器,用于选择带有指定值属性的元素 */
input[type="radio"]{
    position: relative;
    /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。,仅在定位元素上生效 */
    /* 所有效果完成之后可以将z-index去掉,因为此时的display显示为none */
    z-index: 100; 
    display: none;
}
.controls-visible{
    position: absolute;
    width: 100%;
    bottom: 12px;
    text-align: center;
}
.controls-visible label{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    /* 变为圆形 */
    border-radius: 50%;
    margin: 0 3px;
    border:2px solid #FFF
}
/* 判断第一个radio是否处于已选择的状态 ,如果是,则找到里面的第一个label*/
.slides input[type="radio"]:nth-of-type(1):checked ~ .controls-visible label:nth-of-type(1){
    background-color: #333;
}
    /* 判断第二个radio是否处于已选择的状态 ,如果是,则找到里面的第二个label*/
    .slides input[type="radio"]:nth-of-type(2):checked ~ .controls-visible label:nth-of-type(2){
    background-color: #333;
}
    /* 判断第三个radio是否处于已选择的状态 ,如果是,则找到里面的第三个label*/
    .slides input[type="radio"]:nth-of-type(3):checked ~ .controls-visible label:nth-of-type(3){
    background-color: #333;
}

/* 设置轮播图的效果 */ 
/* 当选中第一个radio按钮之后,后面三张 .slide的样式 */
/* 因为我们已经将三张图片的样式横向排列了,所以只需要根据radio按钮,将三个slide向左移动特定的距离即可 */
/* 添加完成后,因为切换很生硬,所以回到slide选择器中加入动画的过渡 */
.slides input[type="radio"]:nth-of-type(1):checked ~ .slide{
    transform: translate(0%);
}
.slides input[type="radio"]:nth-of-type(2):checked ~ .slide{
    /* 向左移动一倍的宽度 */
    transform: translate(-100%);
}
.slides input[type="radio"]:nth-of-type(3):checked ~ .slide{
    transform: translate(-200%);
}
      

参考链接