273 lines
9.1 KiB
PHTML
Executable File
273 lines
9.1 KiB
PHTML
Executable File
<!-- 轮播 s -->
|
||
<?php
|
||
$bigbanners = getBannerList(80, 6);
|
||
if ($bigbanners):
|
||
?>
|
||
<div class="Container swiper-boxq">
|
||
<div class="swiper mySwiperA " id="swiperA">
|
||
<div class="swiper-wrapper">
|
||
<?php
|
||
foreach ($bigbanners as $banner):
|
||
$style='top';
|
||
if($banner['style']==3) {
|
||
$style='right';
|
||
}
|
||
elseif($banner['style']==2){
|
||
$style='left';
|
||
}
|
||
elseif($banner['style']==4){
|
||
$style='bottom';
|
||
}
|
||
|
||
?>
|
||
<div class="swiper-slide">
|
||
<div class="bd-text <?php if(!empty($style)) { echo 'bd-text-'.$style; }?>">
|
||
<?php if($banner['description']): ?>
|
||
|
||
<div class="bd-title <?php if(!empty($style)) { echo 'bd-title-'.$style; }?>" style="color:<?php echo $banner['alt']; ?>"><P><?php echo $banner['name']; ?></P></div>
|
||
<div class="bd-subtitle <?php if(!empty($style)) { echo 'bd-subtitle-'.$style; }?>"
|
||
style="color:<?php echo $banner['descolor']; ?>"><P><?php echo $banner['description']; ?></P></div>
|
||
|
||
<a href="<?php echo $banner['url']; ?>">
|
||
<div class="bd-button <?php if(!empty($style)) { echo 'bd-button-'.$style; }?>">
|
||
Learn More</div>
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
<a href="<?php echo $banner['url']; ?>" target="_blank"><img src="<?php echo getImage($banner['picture']); ?>"/></a>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<div class="swiper-button-next"></div>
|
||
<div class="swiper-button-prev"></div>
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<style>
|
||
.swiper-boxq {
|
||
width: 100%;
|
||
/*height: 800px;*/
|
||
}
|
||
.swiper-boxq .swiper-slide {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
/*margin: 0 !important;*/
|
||
}
|
||
.mySwiperA{
|
||
height: auto;
|
||
}
|
||
.mySwiperA .swiper-wrapper{
|
||
width: 100% !important;
|
||
height: 100%;
|
||
}
|
||
.mySwiperA .bd-text {
|
||
/*position: absolute;*/
|
||
/* text-align: center;*/
|
||
/* font-size: 3rem;*/
|
||
/* top: 10%;*/
|
||
/*width:35%;*/
|
||
/*margin-left: 25%;*/
|
||
color: white;
|
||
width: 70%;
|
||
}
|
||
.mySwiperA .bd-title{
|
||
font-family:Montserrat !important;
|
||
text-align: center;
|
||
font-size: 40px;
|
||
margin-top: 10px;
|
||
line-height: 3.875rem;
|
||
font-weight: 700;
|
||
max-height: 128px;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 显示两行 */
|
||
-webkit-box-orient: vertical; /* 文本在垂直方向排列 */
|
||
}
|
||
|
||
.mySwiperA .bd-title p{
|
||
margin：0；
|
||
padding: 0;
|
||
}
|
||
.mySwiperA .bd-subtitle{
|
||
font-family: Montserrat !important;
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
font-weight: lighter;
|
||
padding-top: 0.5rem;
|
||
max-height: 60px;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 显示两行 */
|
||
-webkit-box-orient: vertical; /* 文本在垂直方向排列 */
|
||
}
|
||
|
||
.mySwiperA .bd-subtitle p{
|
||
margin：0；
|
||
padding: 0;
|
||
}
|
||
.mySwiperA .bd-button{
|
||
font-family: Montserrat !important;
|
||
position: absolute;
|
||
left: 50%;
|
||
margin-left: -60px;
|
||
width: 124px;
|
||
height: 40px;
|
||
border-radius: 26px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
font-size: 0.875rem;
|
||
margin-top: 22px;
|
||
|
||
}
|
||
.mySwiperA .swiper-slide img {
|
||
transform-origin: center center;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.mySwiperA .swiper-slide img:hover {
|
||
transform: none;
|
||
}
|
||
.mySwiperA .swiper-button-next {
|
||
position: absolute !important;
|
||
color: white;
|
||
margin-right: 170px;
|
||
margin-left: 0;
|
||
margin-top: 0px;
|
||
}
|
||
.mySwiperA .swiper-button-prev {
|
||
position: absolute !important;
|
||
color: white;
|
||
margin-left: 170px;
|
||
margin-top: 0px;
|
||
}
|
||
@media screen and (min-width:1939px){
|
||
.mySwiperA .swiper-button-next {
|
||
position: absolute !important;
|
||
color: white;
|
||
margin-right: 15% !important;
|
||
margin-left: 0;
|
||
margin-top: 0px;
|
||
}
|
||
.mySwiperA .swiper-button-prev {
|
||
position: absolute !important;
|
||
color: white;
|
||
margin-left: 15% !important;
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
.mySwiperA .swiper-pagination {
|
||
bottom: 5% !important;
|
||
}
|
||
.mySwiperA .swiper-pagination .swiper-pagination-bullet {
|
||
width: 8px;
|
||
height: 8px;
|
||
color: white;
|
||
}
|
||
.mySwiperA .swiper-pagination-bullet-active {
|
||
width: 24px !important;
|
||
height: 24px;
|
||
border-radius: 10px;
|
||
color: #FFFFFF !important;
|
||
background-color: #FFFFFF !important;
|
||
}
|
||
.fade-in {
|
||
opacity: 0; /* 首先将元素的不透明度设置为0 */
|
||
animation-name: fadeIn; /* 将动画命名为fadeIn */
|
||
animation-duration: 1s; /* 动画持续时间为1s */
|
||
|
||
animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
|
||
transition: all 1s ease;
|
||
}
|
||
@keyframes fadeIn {
|
||
from {opacity: 0.9175;transform: translateY(100px);} /* 从完全透明到不透明 */
|
||
to {opacity: 1;transform: translateY(0);transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out;} /* 最终不透明度为1 */
|
||
}
|
||
.fade-in2 {
|
||
opacity: 0; /* 首先将元素的不透明度设置为0 */
|
||
animation-name: fadeIn2; /* 将动画命名为fadeIn */
|
||
animation-duration: 0.9s; /* 动画持续时间为1s */
|
||
animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
|
||
animation-delay: 0.2s;
|
||
}
|
||
@keyframes fadeIn2 {
|
||
from {opacity: 0;transform: translateY(60px);} /* 从完全透明到不透明 */
|
||
to {opacity: 1;transform: translateY(0);transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out;} /* 最终不透明度为1 */
|
||
|
||
}
|
||
.fade-in3 {
|
||
opacity: 0;
|
||
/* 首先将元素的不透明度设置为0 */
|
||
animation-name: fadeIn3;
|
||
/* 将动画命名为fadeIn */
|
||
animation-duration: 0.8s;
|
||
/* 动画持续时间为1s */
|
||
animation-fill-mode: forwards;
|
||
/* 动画结束后保持最终状态 */
|
||
animation-delay: 0.3s;
|
||
|
||
}
|
||
@keyframes fadeIn3 {
|
||
from {
|
||
opacity: 0;transform: translateY(60px);
|
||
}
|
||
/* 从完全透明到不透明 */
|
||
to {
|
||
opacity: 1;transform: translateY(0);transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out;}
|
||
}
|
||
/* 最终不透明度为1 */
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
|
||
|
||
var swiper = new Swiper(".mySwiperA", {
|
||
slidesPerView: 1,
|
||
spaceBetween: 30,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 5000,
|
||
pauseOnMouseEnter:true,
|
||
disableOnInteraction: false,
|
||
},
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
clickable: true,
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
on: {
|
||
slideChange: function () {
|
||
// 获取当前轮播项的文字元素
|
||
setTimeout(()=>{
|
||
const currentSlide = this.slides[this.activeIndex];
|
||
const fadeText = currentSlide.querySelector('.bd-title');
|
||
const fadeText1 = currentSlide.querySelector('.bd-subtitle');
|
||
const fadeText2 = currentSlide.querySelector('.bd-button');
|
||
fadeText.classList.add('fade-in');
|
||
fadeText1.classList.add('fade-in2');
|
||
fadeText2.classList.add('fade-in3');
|
||
// 设置定时器，动画完成后移除.fade-in类，以便下次再次触发动画
|
||
setTimeout(() => {
|
||
fadeText.classList.remove('fade-in');
|
||
fadeText1.classList.remove('fade-in2');
|
||
fadeText2.classList.remove('fade-in3');
|
||
}, 1000); // 与动画持续时间一致，确保动画完成后移除类
|
||
},5)
|
||
|
||
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<?php endif; ?>
|
||
<!-- 轮播 e -->
|