淘先锋技术网

首页 1 2 3 4 5 6 7

css轮播图效果 

<!DOCTYPE html>
<html >
<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>小张2023/2/20</title>
    <style>
        /* 首先是基本全局样式 */
        *{
            /* 把内外边距取消掉，即设为0 */
            margin: 0;
            padding: 0;
            /* 让边框Border和内边距padding计入宽度width中 */
            box-sizing: border-box;
        }
        body{
            /* vh是屏幕 可视高度的1%，所以100%就表示高度为整个屏幕，而与100%的区别是：后者更加相对父元素的大小的，body的父元素是html，而浏览器默认的情况下 */
            /* 没有设置html的高度，仅设置html的高度为100%，没有设置body的高度为100%，那么100%不会生效，vh就仅和视窗大小有关 */
            height: 100vh;
            /* 以下三行就是看个人，子元素居中对齐呗 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 背景颜色 */
            background-color: rgb(164, 202, 224);
        }
        .main{
            /* 
            设计思路：基本样式用了弹性布局flex，并且让子元素进行水平和垂直居中
            所以底层的盒子main可以直接设置宽高并让超出的部分隐藏，这样不用设margin就可以让自设宽高的盒子居中
            relative是子绝父相，子元素的位置根据main来变化
            */
            /* flex是可以让子元素有相应的布局，根据flex的属性进行布局 */
            position: relative;
            width: 400px;
            height: 250px;
            overflow: hidden;
            border-radius: 5px;
        }
        .item{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            transition: all 0.5s;
            /* 这个就是扩大背景图片至整个背景区域，如果图片和区域的比例不一致，那么图片必然会不完整 */
            background-size: cover;
        }
        .item1{
           background-image: url(./img/1.jpg);
        }
        .item2{
            background-image: url(./img/2.jpg);
            left: 100%;
        }
        .item3{
            background-image: url(./img/3.jpg);
            left: 200%;
        }
        input{
            position: relative;
            /* 优先级考前且先不展示 */
            z-index: 100;
             display: none; 
        }
        /* 这是label底层盒子的样式， */
        .select{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 10px;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;         
        }
        .select>label{
            width: 10px;
            height: 10px;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            cursor: pointer;
            border: 1.5px solid white;
        }
        .main input:nth-of-type(1):checked ~ .select label:nth-of-type(1){
            background-color: rgb(26, 26, 26);
        }
        .main input:nth-of-type(2):checked ~ .select label:nth-of-type(2){
            background-color: rgb(26, 26, 26);
        }
        .main input:nth-of-type(3):checked ~ .select label:nth-of-type(3){
            background-color: rgb(26, 26, 26);
        }
        /* 实现切图，就是哪个输入框被选中，就切换相应位置 */
        .main input:nth-of-type(1):checked ~ .item{
            transform: translateX(0);
        }
        .main input:nth-of-type(2):checked ~ .item{
            transform: translateX(-100%);
        }
        .main input:nth-of-type(3):checked ~ .item{
            transform: translateX(-200%);
        } 
    </style>
</head>
<body>
   <!--  底层盒子 -->
    <div class="main">
        <!-- 三个单选按钮，先默认选择第一个 -->
        <input type="radio" name="choose" id="choose1" checked>
        <input type="radio" name="choose" id="choose2">
        <input type="radio" name="choose" id="choose3">      
        <!-- 放三张图片，用背景图片表示 -->
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <!-- 三个label标签 -->
        <!-- 不知道这个label标签是干嘛的 -->
         <span class="select">
             <label for="choose1"></label>
             <label for="choose2"></label>
             <label for="choose3"></label>
         </span>
    </div>
</body>
</html>

ps:以上代码来源网上，加上了个人理解。