新增首页底部轮播
parent
e37a735f91
commit
afeed637a8
|
|
@ -1,5 +1,5 @@
|
|||
/* 轮播样式 start */
|
||||
.banner-swiper {
|
||||
/* .banner-swiper {
|
||||
overflow-x: hidden;
|
||||
height: 76vh;
|
||||
position: relative;
|
||||
|
|
@ -16,20 +16,20 @@
|
|||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 2px 3px 10px rgba(0,0,0,.8);
|
||||
}
|
||||
} */
|
||||
/* 指示点默认样式 */
|
||||
.banner-swiper .swiper-pagination-bullet {
|
||||
/* .banner-swiper .swiper-pagination-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
} */
|
||||
/* 鼠标悬浮样式、当前选中指示点样式 */
|
||||
.banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active {
|
||||
/* .banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active {
|
||||
background-color: rgba(0,0,0,.8);
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
/* 轮播样式 end */
|
||||
|
||||
/* 导航 start */
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
box-shadow: 0px 0px 10px rgba(0,0,0,.4);
|
||||
color: #b22f2c;
|
||||
margin-bottom: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.huigu-box p {
|
||||
font-size: 1rem;
|
||||
|
|
@ -116,8 +117,8 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
.play-img {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
width: 65px!important;
|
||||
height: 65px!important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -284,3 +285,20 @@
|
|||
height: 50px!important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper-container {width: 100%;height: 160px;overflow: visible!important;margin-bottom: 20px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide{ border-radius: 12px;width: 57%;position: relative;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide img{height: 160px; border-radius: 12px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-prev{ height: 160px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 160px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-next{ height: 160px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 160px;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-active{ width: 57%;}
|
||||
.swiper-container .swiper-wrapper .swiper-slide-active .play-img {
|
||||
width: 65px!important;
|
||||
height: 65px!important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
|
|
|||
33
index.html
33
index.html
|
|
@ -104,23 +104,42 @@
|
|||
<span>感恩奋进70年，致敬时代金沙人！</span>
|
||||
</div>
|
||||
<div class="huigu-box">
|
||||
<div class="banner-swiper swiper">
|
||||
<p style="margin-bottom: 10px;">- 展览回顾相册 -</p>
|
||||
<div class="swiper-container swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<h1 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-01</h1>
|
||||
<a href="javascript:;">
|
||||
<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<img src="imgs/public/play-icon.png" class="play-img">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-02</h1>
|
||||
<a href="javascript:;">
|
||||
<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<img src="imgs/public/play-icon.png" class="play-img">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<h1 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-03</h1>
|
||||
<a href="javascript:;">
|
||||
<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
|
||||
<img src="imgs/public/play-icon.png" class="play-img">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
var mySwiper = new Swiper('.swiper-container', {
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
autoplay: 5000,
|
||||
slidesPerView: "auto",
|
||||
centeredSlides:true,
|
||||
spaceBetween: 20,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
<!-- 视频播放 -->
|
||||
<div class="video-play-box" id="video-box">
|
||||
|
|
|
|||
|
|
@ -119,8 +119,8 @@
|
|||
<a href="javascript:;"><img src="../../imgs/public/vr-icon.png" ></a>
|
||||
<a href="javascript:;"><img src="../../imgs/public/jiyu-icon.png" ></a>
|
||||
</footer>
|
||||
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
|
||||
<!-- <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
|
||||
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script> -->
|
||||
<script src="../../js/barrageWall.js"></script>
|
||||
<script>
|
||||
var val = '';
|
||||
|
|
|
|||
Loading…
Reference in New Issue