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
下载数:274人次, 文件大小: 220.9 KB, 上传日期: 2020年-11月-26日
公众号回复:gcode 获取解压密码
2,966 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付
