纯css简单轮播图练习/自动手动切换（实现点击切换非按钮）

白云好懒

已于 2022-07-27 11:22:01 修改

阅读量4.5k

点赞数 4

分类专栏：前端学习网页制作文章标签： css css3 html

于 2022-03-16 20:03:15 首次发布

本文链接：https://blog.csdn.net/loveforlongtime/article/details/123534539

版权

前端学习同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

网页制作

9 篇文章 1 订阅

订阅专栏

今天用css做一个简单的轮播图练习，效果如图 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55m95LqR5aW95oeS,size_20,color_FFFFFF,t_70,g_se,x_16

点击切换图片

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55m95LqR5aW95oeS,size_20,color_FFFFFF,t_70,g_se,x_16

这里也定义了自动切换的动画aa1 可以实现自动的动画，这里注释掉了，可以打开实现自动切换，并注释掉三个按钮label。

同时打开动画和按钮的切换会有点小问题，大概是我的方法不对，也请大佬指点。

这里采用的类似雪碧图的方法，隐藏溢出的内容通过点击修改位置达到切换图片的效果。

源码：

<!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>
        * {
             margin: 0;
             padding: 0;
           }
           body{
               background: linear-gradient(pink, rgb(216, 102, 102) ,rgb(205, 224, 98));
         
          
           }
          .out{
              margin: 50vh auto;
              width: 800px;
              overflow: hidden;
              position: relative;
              /* border: px solid red; */
         
          }
        ul{
            list-style: none;
            width: 2400px;
            background-color: aqua;
         
            /* animation: aa1 infinite 2s steps(3); */
         

         

        }
        input{
            display: none;
        }
        ul>li{
            background-color: bisque;
            width: 800px;
            height: 400px;
          
            line-height: 400px;
            text-align: center;
            float: left;
            
        }
        ul li:nth-child(1){
            background-color: aquamarine;
            background: url(./img/城市.jpg) no-repeat;
            background-size: cover;

        }
        ul li:nth-child(2){
            background-color: rgb(199, 197, 55);
            background: url(./img/beij.jpg) no-repeat;
            background-size: cover;


        }
        ul li:nth-child(3){
            background-color: rgb(17, 216, 50);
            background: url(./img/prac.jpg) no-repeat;
            background-size: cover;


        }
        .out label{
            border-radius: 50%;
            position: absolute;
            background-color: aliceblue;
            width: 20px;
            height: 20px;
            top: 80%;
            cursor: pointer;
           
           
          
        }
        .out label[for="button1"]{
            left: 35%;
        }
        .out label[for="button2"]{
            left: 45%;
        }
        .out label[for="button3"]{
            left: 55%;
        }
        .out input#button1:checked~ul{
            margin-left: 0px;
            transition:  1s;
        }
        .out input#button2:checked~ul{
            margin-left: -800px;
            transition:  1s;
        }
        .out input#button3:checked~ul{
            margin-left: -1600px;
            transition: 1s;
        }
        .out label:hover{
            border: 1px solid rgb(231, 135, 135);
            box-shadow: rgb(17, 216, 50);
            
        }
        .out input#button1:checked~label[for="button1"]{
            background-color: rgb(217, 231, 20);
        }
        .out input#button2:checked~label[for="button2"]{
            background-color: rgb(220, 235, 20);
        }
        .out input#button3:checked~label[for="button3"]{
            background-color: rgb(229, 233, 27);
        }
      
     

       
        @keyframes aa1{
          
            to{
                margin-left: -2400px;

            }
        }
        
        
    


           
    </style>
</head>
<body>
    <div class="out">
        <input type="radio" name="picture" id="button1"  checked>
        <label for="button1"></label>

        <input type="radio" name="picture" id="button2">
        <label for="button2"></label>

        <input type="radio" name="picture" id="button3">
        <label for="button3"></label>
     



        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>


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