零Javascript实现一个简单的相册

最新推荐文章于 2022-10-09 20:20:59 发布
zijian555
最新推荐文章于 2022-10-09 20:20:59 发布
阅读量255
点赞数
分类专栏： html css 文章标签：服务器
本文链接：https://blog.csdn.net/zijian555/article/details/125659162
版权
html 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏
利用css的属性选择器以及label标签，实现一个简易轮播图

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tracking.js</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> 
        <style>    
            .h100 { height:100vh;}
            .banner {
                height: calc(100vh - 0px);
                width:100%;
                border: 1px solid aliceblue;
                overflow: hidden;position: relative;
            }
            .banner .c {
                width:100%;
                height: 100%; margin:0;
                transition-duration: 0.3s;
                position: absolute;
                transition-timing-function: ease-in-out;
            }
            .banner .c1 {
                // background-color: #b7ebea;
                left:-100%;
            }
            .banner .c2 {
                // background-color: tan;
                left:0;
            }
            .banner .c3 {
                // background-color:#f5d878;
                left:100%;
            }
        .banner .c4 {
                left:200%;
            }
        .banner .c5 {
                left:300%;
            }
            .banner input {
                position: relative;display:none;    
            }
            .banner input[type="radio"]:nth-of-type(1):checked ~  .c{
                transform: translatex(100%);
            }
            .banner input[type="radio"]:nth-of-type(2):checked ~  .c{
                transform: translatex(0%);
            }
            .banner input[type="radio"]:nth-of-type(3):checked ~  .c{
                transform: translatex(-100%);
            }
        .banner input[type="radio"]:nth-of-type(4):checked ~  .c{
                transform: translatex(-200%);
            }
        .banner input[type="radio"]:nth-of-type(5):checked ~  .c{
                transform: translatex(-300%);
            }
            .banner input[type="radio"]:checked {
                margin-left:4px;
            }

            .banner input[type="radio"]:nth-of-type(1):checked ~  .controler-visiable label:nth-of-type(1){
                background-color: black;
            }
            .banner input[type="radio"]:nth-of-type(2):checked ~  .controler-visiable label:nth-of-type(2){
                background-color: black;
            }
            .banner input[type="radio"]:nth-of-type(3):checked ~  .controler-visiable label:nth-of-type(3){
                background-color: black;
            }
         .banner input[type="radio"]:nth-of-type(4):checked ~  .controler-visiable label:nth-of-type(4){
                background-color: black;
            }
         .banner input[type="radio"]:nth-of-type(5):checked ~  .controler-visiable label:nth-of-type(5){
                background-color: black;
            }
            .controler-visiable {
                position: absolute;
                bottom: 25px;
                left: 45%;
            }
            .step-controler {
                position: absolute;
                bottom: 0px;
                left: -0%;
            }
            .controler-visiable label{
                width: 12px;height: 12px;border-radius: 50px;margin: 0 4px;
                border: 1px solid #efefef;
                background-color: white;cursor: pointer;
            }
            .step-controler label{
                width: 24px;height: 30px;font-size:20px;padding:0 2px;
                border: 1px solid #000;
                background-color: pink;cursor: pointer;
            }
        </style>
    </head>
    <body style="padding:0">
        
        <div class="row" style="padding:0;margin:0px">
              <div class="col-xs-2 h100" style="padding:0">
             <label for="radio1"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php" height="100%" width="100%"/></label>
                 <label for="radio2"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=1" height="100%" width="100%"/></label>
                <label for="radio3"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=2" height="100%" width="100%"/></label> 
           <label for="radio4"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=3" height="100%" width="100%"/></label> 
           <label for="radio5"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=4" height="100%" width="100%"/></label> 
        </div>
              <div class="col-xs-10" style="padding:0">
                <div class="banner">
                    <input type="radio" id="radio1" name="control"  checked="checked"/>
                    <input type="radio" id="radio2" name="control"/>
                    <input type="radio" id="radio3" name="control"/>
                    <input type="radio" id="radio4" name="control"/>
                    <input type="radio" id="radio5" name="control"/>
                    <input type="radio" id="radioLeft" name="control"/>
                    <input type="radio" id="radioRight"name="control"/>
                    <div class="c c1 bg-info">
                        <img src="https://api.ixiaowai.cn/gqapi/gqapi.php" height="100%" width="100%"/>
                    </div>
                    <p class="c c2 bg-warning"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=1" height="100%" width="100%"/></p>
                    <p class="c c3 bg-danger"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=2" height="100%" width="100%"/></p>
                     <p class="c c4 bg-danger"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=3" height="100%" width="100%"/></p>
                    <p class="c c5 bg-danger"><img src="https://api.ixiaowai.cn/gqapi/gqapi.php?a=4" height="100%" width="100%"/></p>
                    <div class="controler-visiable">
                        <label for="radio1"></label>
                        <label for="radio2"></label>
                        <label for="radio3"></label>
                        <label for="radio4"></label>
                <label for="radio5"></label>
                    </div>
                </div>
            </div>
        </div>


    </body>
</html>