关于纯css+html实现轮播图（带有点击可以换图）

轮播效果图这是源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,in

jackzcq~

10547人浏览 · 2021-07-27 20:38:04

jackzcq~ · 2021-07-27 20:38:04 发布

轮播效果图:

其中的图片你可以自己替换

大概的思路:

label的id与input[type="radio"]的id绑定实现按钮联动，必须是同级的相邻兄弟元素
input必须在最前面
通过把6个li（插背景图片）采用弹性布局并排成一排
将按钮和6个li(图片）的移动用input[type="radio"]：checked~slide（每一个li）进行绑定
使用transform:translateX（）将li向左移动一个图片区域

这是源码：

<!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>Document</title>

    <style>

        /*使轮播图弹性布局，居中设置最小高度*/

        body{

            display: flex;

            justify-content: center;

            align-items: center;
           /* 1vh 意味着值为视口高度的 1%,vh 则与设备视口的高度有关 */
            
             min-height: 100vh;

        }

        /* 定义一个图片轮播区域 */

        ul.slides{

            position: relative;

            width: 600px;

            height: 280px;

            list-style: none;

            margin: 0;

            padding: 0;

            background-color: #eee;

            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: #fff; */

            transition: .5s transform ease-in-out;

        }

        /* 为6个li添加背景图 */

        .slide:nth-of-type(1){

            background:url(../轮播图练习/img/02.png) no-repeat;

            background-size: cover;

            background-position: top;

        }

        .slide:nth-of-type(2){

            background:url(../轮播图练习/img/03.png) no-repeat;

            background-size: cover;

            background-position: top;

            left: 100%;

        }

        .slide:nth-of-type(3){

            background:url(../轮播图练习/img/04.png) no-repeat;

            background-size: cover;

            background-position: top;

            left: 200%;

        }

        .slide:nth-of-type(4){

            background:url(../轮播图练习/img/05.png) no-repeat;

            background-size: cover;

            background-position: top;

            left: 300%;

        }

        .slide:nth-of-type(5){

            background:url(../轮播图练习/img/06.png) no-repeat;

            background-size: cover;

            background-position: top;

            left: 400%;

        }

        .slide:nth-of-type(6){

            background:url(../轮播图练习/img/07.png) no-repeat;

            background-size: cover;

            background-position: top;

            left: 500%;

        }

        /* 设置按钮作为相对定位和覆盖图片区域 */

        input[type="radio"]{

            position: relative;

            z-index: 100;

            display: none;

        }

        /* 设置与label相关联的按钮的位置 */

        .controls-visible{

            position: absolute;

            width: 100%;

            bottom: 12px;

            text-align: center;

        }

        /* 设置这一组6个label的排列方式并且设置它们的初始样式为白色带有白色边框(以便于选中的变化效果明显) */

        .controls-visible  label{

            display: inline-block;

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #fff;

            margin: 0 5px;

            border: 2px solid #fff;

        }

        /* 当点击label同时按钮被选中时，与之联动定位的label样式发生改变 */

        .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(4):checked~

        .controls-visible label:nth-of-type(4)

        {

            background-color: #333;

        }

        .slides input[type="radio"]:nth-of-type(5):checked~

        .controls-visible label:nth-of-type(5)

        {

            background-color: #333;

        }

        .slides input[type="radio"]:nth-of-type(6):checked~

        .controls-visible label:nth-of-type(6)

        {

            background-color: #333;

        }

      

        /* 当按钮radio被选中时，后面的兄弟元素向左移动一个图片区域距离 */

        .slides input[type="radio"]:nth-of-type(1):checked~.slide{

            transform: translateX(0%);

        }

        .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%);

        }

        .slides input[type="radio"]:nth-of-type(4):checked~.slide{

            transform: translateX(-300%);

        }

        .slides input[type="radio"]:nth-of-type(5):checked~.slide{

            transform: translateX(-400%);

        }

        .slides input[type="radio"]:nth-of-type(6):checked~.slide{

            transform: translateX(-500%);

        }

       

    </style>

</head>

<body>

    <!-- 用ul包裹三个组件 -->

    <ul class="slides">

        <!-- 设置6个radio按钮 -->

        <input type="radio" id="control-1" name="control" checked>

        <input type="radio" id="control-2" name="control">

        <input type="radio" id="control-3" name="control">

        <input type="radio" id="control-4" name="control">

        <input type="radio" id="control-5" name="control">

        <input type="radio" id="control-6" name="control">

       <!-- 设置处于按钮之后的同一级6个兄弟元素li -->

        <li class="slide"></li>

        <li class="slide"></li>

        <li class="slide"></li>

        <li class="slide"></li>

        <li class="slide"></li>

        <li class="slide"></li>

        <!-- 设置label与input相关联 -->

        <div class="controls-visible">

            <label for="control-1"></label>

            <label for="control-2"></label>

            <label for="control-3"></label>

            <label for="control-4"></label>

            <label for="control-5"></label>

            <label for="control-6"></label>

        </div>

    </ul>

</body>

</html>