init
This commit is contained in:
273
app/us/view/include/banner1.phtml
Executable file
273
app/us/view/include/banner1.phtml
Executable file
@@ -0,0 +1,273 @@
|
||||
<!-- 轮播 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 -->
|
||||
Reference in New Issue
Block a user