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

作者code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  5. <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  6. <script type="text/javascript" src="js/killercarousel.js"></script>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  14. body {
  15. background: #D8914B;
  16. }
  18. .kc-wrap {
  19. -webkit-touch-callout: none;
  20. -webkit-user-select: none;
  21. -khtml-user-select: none;
  22. -moz-user-select: none;
  23. -ms-user-select: none;
  24. -ms-touch-action: none;
  25. overflow: hidden;
  26. position: relative;
  27. background-position: center;
  28. width: 100%;
  29. padding-bottom: 35%;
  30. }
  32. .kc-item {
  33. position: absolute;
  34. width: 188px;
  35. height: 250px;
  36. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  37. visibility: hidden;
  38. border: 4px solid white;
  39. }
  41. .kc-shadow-bottom {
  42. position: absolute !important;
  43. top: 100% !important;
  44. width: 100% !important;
  45. height: 10% !important;
  46. background-image: url(images/shadow-bottom.png);
  47. left: 0px !important;
  48. }
  50. .kc-shadow-left,
  51. .kc-shadow-right {
  52. position: absolute !important;
  53. top: 0% !important;
  54. width: 10% !important;
  55. height: 100% !important;
  56. left: -10% !important;
  57. background-image: url(images/shadow-left.png);
  58. }
  60. .kc-shadow-right {
  61. left: 100% !important;
  62. background-image: url(images/shadow-right.png);
  63. }
  65. .kc-reflection {
  66. position: absolute;
  67. left: 0px;
  68. top: 0px;
  69. width: 100%;
  70. height: 0px;
  71. }
  73. .kc-nav-wrap {
  74. display: inline-block;
  75. position: absolute;
  76. z-index: 1000;
  77. }
  79. #nav-buts {
  80. position: absolute;
  81. bottom: 10px;
  82. right: 10px;
  83. }
  85. .nav-but-left,
  86. .nav-but-right {
  87. font-family: arial;
  88. width: 32px;
  89. height: 26px;
  90. border: 2px solid #ccc;
  91. background-color: #444;
  92. border-radius: 5px;
  93. text-align: center;
  94. float: left;
  95. color: #fff;
  96. font-size: 16px;
  97. margin-right: 10px;
  98. padding-top: 7px;
  99. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  100. cursor: pointer;
  101. }
  103. .nav-but-left:hover,
  104. .nav-but-right:hover {
  105. background-color: #666;
  106. }
  107. </style>
  109. </head>
  111. <body>
  113. <br><br><br><br><br><br>
  115. <div class="kc-wrap">
  116. <!-- Carousel items follow start -->
  117. <div id="nav-buts">
  118. <div class="nav-but-left">?</div>
  119. <div class="nav-but-right">?</div>
  120. </div>
  122. <!-- Carousel items follow end -->
  123. <div class="kc-horizon">
  124. <div class="kc-item">
  125. <img src="images/image5.jpg">
  126. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  128. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  130. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png">
  131. </div>
  136. <div class="kc-item">
  137. <img src="images/image6.jpg">
  138. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  140. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png"><img class="cc-decoration kc-shadow-right" src="images/shadow-right.png">
  142. </div>
  148. <div class="kc-item">
  149. <img src="images/image7.jpg">
  150. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  152. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  154. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  156. </div>
  158. <div class="kc-item">
  159. <img src="images/image8.jpg">
  160. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  162. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  164. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  166. </div>
  169. <div class="kc-item kc-front-item">
  170. <img src="images/image9.jpg">
  172. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  175. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  177. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  179. </div>
  180. <div class="kc-item">
  181. <img src="images/image10.jpg">
  182. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  184. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  186. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  188. </div>
  189. <div class="kc-item">
  190. <img src="images/image11.jpg">
  191. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  194. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  196. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  198. </div>
  199. <div class="kc-item">
  200. <img src="images/image12.jpg">
  201. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  203. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  205. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  207. </div>
  208. <div class="kc-item">
  209. <img src="images/image13.jpg">
  210. <img class="cc-decoration kc-shadow-bottom" src="images/shadow-bottom.png" style="background-image: none;">
  213. <img class="cc-decoration kc-shadow-left" src="images/shadow-left.png" style="background-image: none;">
  215. <img class="cc-decoration kc-shadow-right" src="images/shadow-right.png" style="background-image: none;">
  217. </div>
  218. </div>
  219. </div>
  221. <!-- band-color-2 end -->
  222. </body>
  223. </html>
<!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
下载数:303人次, 文件大小: 220.9 KB, 上传日期: 2020年-11 月-26日

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

qrcode_for_gh_6ea2c28a1709_258 (1)

3,517 人查阅

类似文章