插件配置轮播

js/index.js

@@ -32,12 +32,71 @@ $(function () {
     }
   }
   isRecommend();
-  // 设置首页函数
-  function setIndexData() {
-    const commentObj = JSON.parse(sessionStorage.commentData);
-    if (commentObj.honor.length > 0) {
-      commentObj.honor.forEach((item) => {
-        $("#certBox").append(`<div class="cert-item">
+  let bannerSwiper = null;
+  const initBannerSwiper = () => {
+    if (bannerSwiper) {
+      bannerSwiper.destroy(true, true);
+    }
+    bannerSwiper = new Swiper(".swiper", {
+      loop: true,
+      autoplay: true,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+    });
+  };
+
+  const renderBannerSlides = (list = []) => {
+    const wrapper = document.getElementById("bannerWrapper");
+    if (!wrapper) {
+      return;
+    }
+    if (!Array.isArray(list) || list.length === 0) {
+      initBannerSwiper();
+      return;
+    }
+    wrapper.innerHTML = "";
+    list.forEach((item) => {
+      const slide = document.createElement("div");
+      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 imgHtml = `<img class="img-responsive img center-block" src="${
+        item.img || ""
+      }" alt="${item.alt || item.title || "banner"}">`;
+      const mediaBlock = item.url
+        ? `<a href="${item.url}" target="${targetAttr}">${imgHtml}</a>`
+        : imgHtml;
+      const contentBlock =
+        title || desc || buttonHtml
+          ? `<div class="section-content">${title}${desc}${buttonHtml}</div>`
+          : "";
+      slide.innerHTML = `
+        ${mediaBlock}
+        ${contentBlock}
+      `;
+      wrapper.appendChild(slide);
+    });
+    initBannerSwiper();
+  };
+
+  // 设置首页函数
+  function setIndexData() {
+    const commentObj = JSON.parse(sessionStorage.commentData);
+    renderBannerSlides(commentObj.banner);
+    if (commentObj.honor.length > 0) {
+      commentObj.honor.forEach((item) => {
+        $("#certBox").append(`<div class="cert-item">
           <img src=${item.img} alt="">
           <p class="mt-20">${item.name}</p>
         </div>`);
@@ -106,15 +165,7 @@ $(function () {
     viewer.show();
   });
 
-  const mySwiper = new Swiper(".swiper", {
-    loop: true, // 循环模式选项
-    autoplay: true,
-    // 如果需要分页器
-    pagination: {
-      el: ".swiper-pagination",
-      clickable: true,
-    },
-  });
+  initBannerSwiper();
   function formateTimeFun(time) {
     const date = new Date(time * 1000);
     Y = date.getFullYear() + "-";