css尝试写网页轮播效果

最新推荐文章于 2023-04-06 20:31:33 发布
小杨不会编程(っ◞‸◟c)
最新推荐文章于 2023-04-06 20:31:33 发布
阅读量214
点赞数
本文链接：https://blog.csdn.net/weixin_47263611/article/details/124794056
版权
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="关键词信息">
    <meta name="leave" content="作者">
    <meta name="description" content="描述信息">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leave</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        ul {
            margin: 100px;
            position: relative;
        }

        ul>li {
            width: 500px;
            height: 300px;
            position: absolute;

        }

        /* 开始给每个li添加背景图片(点击产生轮播的图片，因为我没有多少图片就拿背景颜色代替了) */

        ul>li:first-child {
            background-color: aqua;
            z-index: 1;
        }

        ul>li:nth-child(2) {
            background-color: beige;
        }

        ul>li:nth-child(3) {
            background-color: rgb(241, 241, 24);
        }

        ul>li:last-child {
            background-color: pink;
        }

        /* 这里是中间的四个圆圈，给他们添加定位摆放好位置 */
        .s {
            position: absolute;
            left: 300px;
            top: 380px;
            z-index: 3;
        }

        #s1 {
            margin-left: 20px;
        }

        #s2 {
            margin-left: 40px;
        }

        #s3 {
            margin-left: 60px;
        }

        /* 这里开始是重点！！！ */

        /*
        这里你需要了解关系选择器的使用：
        给你复习一下：
        1."+" 相邻选择器 
        选中满足条件的相邻元素
        先找到满足条件的所有元素再判断这个元素的哥哥/姐姐满足条件,满足就生效里面的代码
        举个例子：
         div + p {  先找到所有的p标签 然后判断他有没有一个相邻的哥哥元素叫div,有的话就生效 
            color: red;
        }
        */

        /* 2."~" 兄弟选择器
        兄弟/姐妹选择器(弟弟/妹妹选择器) 怎么叫都可以 
        选中满足条件的所有兄弟元素 就是同级
        书写方式 兄弟元素~另一个兄弟元素
        兄弟选择器和相邻选择器都只存在于兄弟级*/
        /* 举个例子： 
        .box b ~ span{
            color: blueviolet;
        }
        */

        
        /* .s:checked~div 让四个圆圈和两个侧边的div产生关联
           因为一旦出现点击效果，两个div就会被覆盖，所以要解决
        */
        .s:checked~div{
            color: aliceblue;
            /* 因为会出现层级，所以要合理设置层级 层级越高，越在上*/
            z-index: 3;
        }

        

        /* 这里让四个圆圈和四个li产生关联，这样才可以产生点击效果 */
        #s1:checked~ul>li:nth-child(1) {
            background-color: blue;
            z-index: 2;
        }

        /* 这里解读一下代码：#s1:checked~ul>li:nth-child(1) 当点击#s1单选框的时候会使ul里面的第一个li发生改变
        是什么样的改变？看下面代码：
            background-color: blue; 发生背景颜色改成蓝色
            z-index: 2; 层级提高
        } */
        
        #s2:checked~ul>li:nth-child(2) {
            background-color: yellow;
            z-index: 2;
        }
        
        #s3:checked~ul>li:nth-child(3) {
            background-color: rgb(118, 224, 19);
            z-index: 2;
        }
        
        #s4:checked~ul>li:nth-child(4) {
            background-color: rgb(246, 21, 156);
            z-index: 2;
        }
        

        /* 这里给两边的侧边单选框设置属性和位置 */
        .ch {
            position: absolute;
            width: 40px;
            height: 40px;
            z-index: 2;
            cursor: pointer;/*鼠标样式，解释一下：你肯定会问为什么不用a标签，因为有层级关系,有两个单选框ch1,ch2他们的层级都要比div高，所以实现不了，后面学JavaScript可以解决*/
            opacity: 0;/*因为会出现两个单选框，影响美观，这里要设置透明度，让用户以为就是点击div而产生的轮播，就看不到你的单选框咯*/
        }

        /* 调整两边的单选框位置要和div位置重叠 */
        #ch1 {
            left: 550px;
            top: 247px;
        }
        #ch2{
            left: 110px;
            top: 247px;
        }

        /* 让四个圆圈和两个侧边的两个单选框产生关联
           因为一旦出现点击效果，两个单选框就会被覆盖，所以要解决
           这里单选框设置了透明度，并且层级要比div的高
        */
        .s:checked~.ch {
        color: aliceblue;
           z-index: 4;
       }

        /* 这里设置点击两个侧边单选框产生的效果 我用了个图片做测试，我只发的html页面，你应该看不到，
        你可以引入你的图片测试一下，其它单选框点击效果都可以改成背景图片，这样就实现了点击轮播效果！！*/
        #ch1:checked~ul>li {
            background-color: darkcyan;
            background: url(./img/v2-01cf3b88f2ea2aadfc3650b34c667933_r.jpg) no-repeat center;
            background-size:  cover;
        } 

        #ch2:checked~ul>li {
            background-color: rgb(210, 109, 178);
        }

       

        /* 设置div的属性和位置 */
        div {
            position: absolute;
            font-size: 22px;
            width: 30px;
            height: 30px;
            color: brown;
            z-index: 2;
            text-align: center;
            border-radius: 50%;
            background-color: rgba(164, 171, 179, 0.467);
        }

        .div1 {
            left: 558px;
            top: 247px;
        }
        .div2 {
            left: 110px;
            top: 247px;
        }
    </style>
</head>

<body>
            <!-- 这里是中间的四个圆圈，可以点击产生轮番效果 -->
            <input type="radio" name="say" id="s1" class="s">
            <input type="radio" name="say" id="s2" class="s">
            <input type="radio" name="say" id="s3" class="s" checked>
            <input type="radio" name="say" id="s4" class="s" >

            <!-- 这里是两侧的轮番,可以使用图标代替-->
            <div class="div1"><</div>
            <div class="div2">></div>
            <!-- 这里是两侧的轮番的点击 -->
            <input type="radio" name="say" id="ch1" class="ch" >
            <input type="radio" name="say" id="ch2" class="ch">

            <!-- 这里是四个图片的位置 -->
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

            <!-- JavaScript部分 暂时不用 -->
            <script>
                'use strict'

            </script>
</body>

</html>