前端实例：纯CSS实现轮播效果

最新推荐文章于 2024-09-06 23:20:39 发布

中南滴水哥

最新推荐文章于 2024-09-06 23:20:39 发布

阅读量936

点赞数 1

分类专栏：前端文章标签： css html5 html css3 前端

本文链接：https://blog.csdn.net/qq_43742385/article/details/109662154

版权

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

学习了CSS之后，决定用CSS做一个简单的CSS轮播效果，代码只涉及CSS和HTML，由于还有些不完善的地方，所以仅供参考。

工具：VSCode
语言：HTML+CSS
GitHub地址：轮播图

效果展示：
在这里插入图片描述
思路解释：
总体上采用ul+li来实现，具体步骤：

定义ul的宽高，定位为相对定位，将li设置为inline-block让其水平排列，定位绝对定位（绝对定位导致三个li重叠）
将第二个li向左移动100%，第三个向左移动200%，这样三个li在同一条水平线上排列，不会再覆盖。
将ul的overflow设置为hidden
定义三个input，类型为radio，保证其在li的上方，这样在后面使用后续兄弟选择器~时能选择到input，同时由于可以使用radio：checked，所以选择用radio。
使用label绑定radio。同时让radio选择的时候，对应的label样式也会变。
将对应的li绑定到对应的radio中去
完事

完整代码

<!--
 * @Author: CSU_XZY
 * @Date: 2020-11-12 21:26:55
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-11-12 22:57:37
 * @FilePath: \第二天c:\Users\XZY\Desktop\前端\CSS\轮播图\lunbo.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="lunbo.css" type="stylesheet">
</head>
<body>
    <ul class="slides">
        <input type="radio" id="control-1" name="control" checked="checked">
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">
        
        <li class="slide">1</li>
        <li class="slide">2</li>
        <li class="slide">3</li>

        <div class="controls-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
        </div>
    </ul>
</body>
</html>
<style>
    body{
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    ul.slides{
        margin: 0;
        padding: 0;
        position: relative;
        background-color: #eee;
        width: 600px;
        height: 280px;
        list-style: none;
        overflow: hidden;
    }
    li.slide{
        margin: 0;
        padding: 0;
        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: #ffffff;
        transition: .5S transform ease-in-out;
    }
    .slide:nth-of-type(1){
        background-color: #F25C05;
    }
    .slide:nth-of-type(2){
        background-color: #F2E205;
        left: 100%;
    }
    .slide:nth-of-type(3){
        background-color:#495F8C;
        left: 200%;
    }
    input[type="radio"] {
        position: relative;
        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: #fff;
        border-radius: 50%;
        margin: 0 3px;
        border: 2px solid #fff;
    }
    .slides input[type="radio"]:nth-of-type(1):checked ~.controls-visible label:nth-of-type(1)
    {
        background-color: #333;
    }
    .slides input[type="radio"]:nth-of-type(2):checked ~.controls-visible label:nth-of-type(2)
    {
        background-color: #333;
    }
    .slides input[type="radio"]:nth-of-type(3):checked ~.controls-visible label:nth-of-type(3)
    {
        background-color: #333;
    }

    .slides input[type="radio"]:nth-of-type(1):checked ~ .slide{
        transform: translateX0
    }
    .slides input[type="radio"]:nth-of-type(2):checked ~ .slide{
        transform: translateX(-100%);
    }
    .slides input[type="radio"]:nth-of-type(3):checked ~ .slide{
        transform: translateX(-200%);
    }
    
</style>

后续使用JavaScript做一个更牛逼的。