FORGOT YOUR DETAILS?

/ Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

TML, CSS, JS鼠标滑动或者点击旋转木马图片展示cid1113-前端设计

<!DOCTYPE html>
<html lang="en">
   <head>

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/killercarousel.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #D8914B;
        }

        .kc-wrap {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -ms-touch-action: none;
            overflow: hidden;
            position: relative;
            background-position: center;
            width: 100%;
            padding-bottom: 35%;
        }

        .kc-item {
            position: absolute;
            width: 188px;
            height: 250px;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            visibility: hidden;
            border: 4px solid white;
        }

        .kc-shadow-bottom {
            position: absolute !important;
            top: 100% !important;
            width: 100% !important;
            height: 10% !important;
            background-image: url(images/shadow-bottom.png);
            left: 0px !important;
        }

        .kc-shadow-left,
        .kc-shadow-right {
            position: absolute !important;
            top: 0% !important;
            width: 10% !important;
            height: 100% !important;
            left: -10% !important;
            background-image: url(images/shadow-left.png);
        }

        .kc-shadow-right {
            left: 100% !important;
            background-image: url(images/shadow-right.png);
        }

        .kc-reflection {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 0px;
        }

        .kc-nav-wrap {
            display: inline-block;
            position: absolute;
            z-index: 1000;
        }

        #nav-buts {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }

        .nav-but-left,
        .nav-but-right {
            font-family: arial;
            width: 32px;
            height: 26px;
            border: 2px solid #ccc;
            background-color: #444;
            border-radius: 5px;
            text-align: center;
            float: left;
            color: #fff;
            font-size: 16px;
            margin-right: 10px;
            padding-top: 7px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }

        .nav-but-left:hover,
        .nav-but-right:hover {
            background-color: #666;
        }
    </style>

</head>

<body>

    <br><br><br><br><br><br>

    <div class="kc-wrap">
        <!-- Carousel items follow start -->
        <div id="nav-buts">
            <div class="nav-but-left">?</div>
            <div class="nav-but-right">?</div>
        </div>

        <!-- Carousel items follow end -->
        <div class="kc-horizon">
            <div class="kc-item">
                <img src="images/image5.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png">
            </div>




            <div class="kc-item">
                <img src="images/image6.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png"><img class="cc-decoration kc-shadow-right" src="images/shadow-right.png">

            </div>





            <div class="kc-item">
                <img src="images/image7.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>

            <div class="kc-item">
                <img src="images/image8.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>


            <div class="kc-item kc-front-item">
                <img src="images/image9.jpg">

                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">


                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>
            <div class="kc-item">
                <img src="images/image10.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>
            <div class="kc-item">
                <img src="images/image11.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">


                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>
            <div class="kc-item">
                <img src="images/image12.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>
            <div class="kc-item">
                <img src="images/image13.jpg">
                <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">


                <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">

                <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">

            </div>
        </div>
    </div>

    <!-- band-color-2 end -->
</body>
</html>

?在线演示

让链接同时具备两种打开方式
获取源码: Killer Crosal
下载数:294人次, 文件大小: 220.9 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,198 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 6元 才能查看此处内容！立即支付

Tagged under:
TOP