yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

轮播图闪烁
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-21 17:53:08 +08:00
parent a35593bf8a
commit 7a99ebef9d
3 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
css/index.css
View File

@@ -1,13 +1,13 @@
/* banner */ /* banner */
.banner-cont { .banner-cont {
width: 100%; width: 100%;
} }
.banner-cont .swiper-slide { .banner-cont .swiper-slide {
height: 500px; height: 500px;
width: 100%; width: 100%;
background: linear-gradient(0, #f7f9fa, #f9fafb); background: linear-gradient(0, #f7f9fa, #f9fafb);
} }
.banner-cont .swiper-slide .img { .banner-cont .swiper-slide .img {
/* position: absolute; */ /* position: absolute; */
@@ -35,9 +35,31 @@
border-radius: 3px; border-radius: 3px;
} }
.banner-cont .swiper-pagination-bullet-active { .banner-cont .swiper-pagination-bullet-active {
background: rgba(255, 103, 57, 1); background: rgba(255, 103, 57, 1);
} }
.banner-cont {
position: relative;
}
.banner-cont .banner-text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.banner-cont .banner-text .section-content {
z-index: 1;
}
.banner-cont .banner-text .btn {
pointer-events: auto;
}
.banner .banner-s { .banner .banner-s {
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16); box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);

19
index.html
View File

@@ -9,16 +9,29 @@
</head> </head>
<body id="index"> <body id="index">
<header>{include file="public/header"}</header> <header>{include file="public/header"}</header>
<!-- banner --> <!-- banner -->
<section class="section banner"> <section class="section banner">
<div class="swiper banner-cont"> <div class="swiper banner-cont">
<div class="swiper-wrapper" id="bannerWrapper"></div> <div class="swiper-wrapper" id="bannerWrapper"></div>
<!-- 如果需要分页器 --> <!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
<!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
<div class="banner-text">
<div class="section-content">
<h1 id="bannerTitle"></h1>
<p class="banner-desc" id="bannerDesc"></p>
<a
class="btn btn2 btn-normal"
href="javascript:;"
id="bannerButton"
style="display: none;"
></a>
</div>
</div>
</div>
</div> </div>
</div>
<div class="banner-s"> <div class="banner-s">
<div class="section-content banner-list"> <div class="section-content banner-list">
<div class="banner-item" id="cloud-box"> <div class="banner-item" id="cloud-box">

40
js/index.js
View File

@@ -60,16 +60,6 @@ $(function () {
list.forEach((item) => { list.forEach((item) => {
const slide = document.createElement("div"); const slide = document.createElement("div");
slide.className = "swiper-slide"; slide.className = "swiper-slide";
const title = item.title ? `<h1>${item.title}</h1>` : "";
const desc = item.description
? `<p class="banner-desc">${item.description}</p>`
: "";
let buttonHtml = "";
if (item.button_text) {
const link = item.button_link || "javascript:;";
const target = item.button_blank ? "_blank" : "_self";
buttonHtml = `<a class="btn btn2 btn-normal" href="${link}" target="${target}">${item.button_text}</a>`;
}
const targetAttr = item.blank ? "_blank" : "_self"; const targetAttr = item.blank ? "_blank" : "_self";
const imgHtml = `<img class="img-responsive img center-block" src="${ const imgHtml = `<img class="img-responsive img center-block" src="${
item.img || "" item.img || ""
@@ -77,14 +67,7 @@ $(function () {
const mediaBlock = item.url const mediaBlock = item.url
? `<a href="${item.url}" target="${targetAttr}">${imgHtml}</a>` ? `<a href="${item.url}" target="${targetAttr}">${imgHtml}</a>`
: imgHtml; : imgHtml;
const contentBlock = slide.innerHTML = mediaBlock;
title || desc || buttonHtml
? `<div class="section-content">${title}${desc}${buttonHtml}</div>`
: "";
slide.innerHTML = `
${mediaBlock}
${contentBlock}
`;
wrapper.appendChild(slide); wrapper.appendChild(slide);
}); });
initBannerSwiper(); initBannerSwiper();
@@ -93,6 +76,27 @@ $(function () {
// 设置首页函数 // 设置首页函数
function setIndexData() { function setIndexData() {
const commentObj = JSON.parse(sessionStorage.commentData); const commentObj = JSON.parse(sessionStorage.commentData);
const bannerList = commentObj.banner || [];
// 使用第一张轮播图的标题/描述/按钮渲染固定文案区域
if (bannerList.length) {
const first = bannerList[0];
$("#bannerTitle").text(first.title || "");
$("#bannerDesc").text(first.description || "");
const $btn = $("#bannerButton");
if (first.button_text) {
const link = first.button_link || first.url || "javascript:;";
const target = first.button_blank ? "_blank" : "_self";
$btn
.text(first.button_text)
.attr("href", link)
.attr("target", target)
.show();
} else {
$btn.hide();
}
}
renderBannerSlides(commentObj.banner); renderBannerSlides(commentObj.banner);
if (commentObj.honor.length > 0) { if (commentObj.honor.length > 0) {
commentObj.honor.forEach((item) => { commentObj.honor.forEach((item) => {