代码

首页

轮播图

html

<div class="home-carousel-wrapper">    <button class="carousel-arrow left" onclick="scrollCarousel(-1)">‹</button>      <div class="home-carousel" id="carousel">      <!-- 每张卡片 -->      <a class="feature-item" href="http://eztoolboxqld.com.au/product-category/canopies/xceed-canopies-canopies/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-xcanopies-2025-700x700.jpg"  alt="Xceed Canopies">        <div class="feature-text">          <h4>Xceed Canopies</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/canopies/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-canopies-2025-700x700.jpg" alt="Canopies">        <div class="feature-text">          <h4>Canopies</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/tub-canopies/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-tubcanopies_color_White_PicCopilot_6fe4a.png" alt="Tub Canopies">        <div class="feature-text">          <h4>Tub Canopies</h4>         </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/half-canopies/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/ALL-HALFCANOPIES-WEB_color_White_PicCopilot_96d3a.png" alt="Half Canopies">        <div class="feature-text">          <h4>Half Canopies</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/trays/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-trays-2025-700x700.jpg" alt="Trays">        <div class="feature-text">          <h4>Trays</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/trays/xceed-trays-trays/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-xtrays-2025-700x700.jpg" alt="Xceed Trays">        <div class="feature-text">          <h4>Xceed Trays</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/tray-canopy/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/04/ALL-CMBS-WEB_color_White_PicCopilot_4e6cb-700x700-1.png" alt="Tray & Canopy">        <div class="feature-text">          <h4>Tray & Canopy</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/accessories/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-accessories-2025-700x700.jpg" alt="Accessories">        <div class="feature-text">          <h4>Accessories</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/drawers/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-drawers_color_White_PicCopilot_3c646.png" alt="Drawer">        <div class="feature-text">          <h4>Drawer</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/product-category/trailers/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-trailers_color_White_PicCopilot_d5277.png" alt="Trailers">        <div class="feature-text">          <h4>Trailer</h4>        </div>      </a>      <a class="feature-item" href="https://www.eztoolboxqld.com.au/chassis-mount-canopy/">        <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/cat-servicebodies-2025-1-700x678.jpg" alt="Service Body">        <div class="feature-text">          <h4>Service Body</h4>        </div>      </a>      <!-- 添加更多卡片... -->    </div>      <button class="carousel-arrow right" onclick="scrollCarousel(1)">›</button>      <div class="carousel-progress">      <div class="carousel-progress-bar" id="progressBar"></div>    </div>  </div>
 

JS

 
     const carousel = document.getElementById("carousel");    const progressBar = document.getElementById("progressBar");        // 滑动进度条    
     carousel.addEventListener("scroll", () => {      const scrollLeft = carousel.scrollLeft;      const scrollWidth = carousel.scrollWidth - carousel.clientWidth;      const progress = (scrollLeft / scrollWidth) * 100;      progressBar.style.width = `${progress}%`;    });        // 左右按钮滚动    
function scrollCarousel(direction) {      const card = carousel.querySelector('.feature-item');      if (!card) return;      const cardWidth = card.offsetWidth + 12; // 加上间距
      carousel.scrollBy({        left: direction * cardWidth,        behavior: 'smooth'      });    }        // 鼠标拖动支持  
       let isDown = false;    let startX, scrollLeft;        carousel.addEventListener("mousedown", (e) => {      isDown = true;      carousel.classList.add("dragging");      startX = e.pageX - carousel.offsetLeft;      scrollLeft = carousel.scrollLeft;    });        carousel.addEventListener("mouseleave", () => {      isDown = false;      carousel.classList.remove("dragging");    });        carousel.addEventListener("mouseup", () => {      isDown = false;      carousel.classList.remove("dragging");    });        carousel.addEventListener("mousemove", (e) => {      if (!isDown) return;      e.preventDefault();      const x = e.pageX - carousel.offsetLeft;      const walk = (x - startX) * 1.5;      carousel.scrollLeft = scrollLeft - walk;    });        carousel.querySelectorAll('img').forEach(img => img.setAttribute('draggable', 'false'));     // 禁用 <a> 和 <img> 的拖拽行为 
     carousel.querySelectorAll('a, img, #carousel').forEach(el => {  el.setAttribute('draggable', 'false');});

CSS

.home-carousel-wrapper {    position: relative;    width: 100%;    padding: 20px 10px;    box-sizing: border-box;  }    .home-carousel {    display: flex;    overflow-x: auto;    scroll-snap-type: x mandatory;    scroll-behavior: smooth;    -webkit-overflow-scrolling: touch;    gap: 12px;    scroll-behavior: smooth; /* 滚动平滑 */    /*transition: scroll-left 0.3s ease-out;*/  }   .home-carousel::-webkit-scrollbar {    display: none;  }    .home-carousel-wrapper .feature-item {    flex: 0 0 calc(100% - 12px); /* 默认1个 */    scroll-snap-align: start;    background-color: #fff;    border-radius: 8px;    overflow: hidden;  }    .home-carousel-wrapper .feature-item img {    width: 100%;    /*height: 200px;*/    object-fit: cover;    display: block;  }    .home-carousel-wrapper .feature-text {    padding: 10px 12px;    color: #000;  }    .home-carousel-wrapper .feature-text h4 {    margin: 0 0 5px;    font-size: 16px;    text-align: center;    font-weight: bold;    /*text-transform: ;*/  }    .home-carousel-wrapper .feature-text p {    margin: 0;    font-size: 14px;    color: #000;  }    /* 响应式宽度： */    @media (min-width: 360px) {    .home-carousel-wrapper .feature-item {      flex: 0 0 calc(50% - 12px);    }  }    @media (min-width: 768px) {    .home-carousel-wrapper .feature-item {      flex: 0 0 calc(33.333% - 12px);    }  }    @media (min-width: 1024px) {    .home-carousel-wrapper .feature-item {      flex: 0 0 calc(33.333%/2 - 12px);    }  }    /* 箭头样式 */  .carousel-arrow {    position: absolute;    top: 50%;    transform: translateY(-50%);    background: #111;    color: #fff;    border: none;    padding: 10px 14px;    margin: 0px -24px;    border-radius: 6px;    z-index: 10;    cursor: pointer;    font-size: 24px;    opacity: 0.8;  }  .carousel-arrow:hover {    opacity: 1;  }  .carousel-arrow.left {    left: 0;  }  .carousel-arrow.right {    right: 0;  }    /* 进度条 */  .carousel-progress {    margin-top: 10px;    height: 2px;    background: none;    border-radius: 2px;    overflow: hidden;  }  .carousel-progress-bar {    height: 100%;    width: 0%;    background: #a20401;    transition: width 0.2s ease-out;  }    /* 鼠标拖动样式 */  .home-carousel.dragging {    cursor: grabbing;    scroll-behavior: auto;  }

定制页

轮播图

html

<div class="x-carousel">  <div class="x-carousel-inner" id="xCarouselInner">    <div class="x-slide active">      <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP1.jpg" alt="Slide 1" loading="lazy" />      <div class="x-caption">        <h2>Central Locking</h2>        <p>Integrates canopy door locks with the ute key for seamless access.</p>      </div>    </div>    <div class="x-slide">      <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP2.jpg" alt="Slide 2" loading="lazy" />      <div class="x-caption">        <h2>Trundle Drawer</h2>        <p>Underbody drawer with lockable lid for additional storage space.</p>      </div>    </div>    <div class="x-slide">      <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP3.jpg" alt="Slide 3" loading="lazy" />      <div class="x-caption">        <h2>Water Supply</h2>        <p>40L aluminium or 80L PVC underbody water tank. </p>      </div>    </div>    <div class="x-slide">  <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP4.jpg" alt="Slide 4" loading="lazy" />  <div class="x-caption">    <h2>Infill Panel</h2>    <p>Custom-designed by models, ensuring an integrated aesthetic finish.</p>  </div></div>    <div class="x-slide">  <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP5.jpg" alt="Slide 5" loading="lazy" />  <div class="x-caption">    <h2>External Accessories</h2>    <p>Jerry can holder, ladder, spare wheel carrier, and roof rack. </p>  </div></div>    <div class="x-slide">  <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMBOP6.jpg" alt="Slide 6" loading="lazy" />  <div class="x-caption">    <h2>Internal Fitout</h2>    <p>Custom-built storage solutions and 12V system support. </p>  </div></div>  </div>   <button class="x-arrow left" onclick="moveSlide(-1)">&#10094;</button>  <button class="x-arrow right" onclick="moveSlide(1)">&#10095;</button></div>
 

js

const carouselInner = document.getElementById("xCarouselInner");let slides = document.querySelectorAll(".x-slide");let currentSlide = 1;let isTransitioning = false; 
// 克隆第一张和最后一张用于无缝循环
const firstClone = slides[0].cloneNode(true);const lastClone = slides[slides.length - 1].cloneNode(true);firstClone.classList.add("clone");lastClone.classList.add("clone"); carouselInner.appendChild(firstClone);carouselInner.insertBefore(lastClone, slides[0]); slides = document.querySelectorAll(".x-slide");const totalSlides = slides.length; // 初始化位置
carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`; // 滑动函数
function moveSlide(step) {  if (isTransitioning) return;  isTransitioning = true;  currentSlide += step;  updateSlide();} // 轮播更新
function updateSlide() {  carouselInner.style.transition = "transform 0.6s ease-in-out";  carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`;   // 等动画结束后判断是否到克隆图  
carouselInner.addEventListener("transitionend", handleTransitionEnd, { once: true });} function handleTransitionEnd() {  if (slides[currentSlide].classList.contains("clone")) {    carouselInner.style.transition = "none";    if (currentSlide === 0) {      currentSlide = slides.length - 2; // 跳到最后一张真实图  
} else if (currentSlide === slides.length - 1) {      currentSlide = 1; // 跳到第一张真实图  
}    carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`;  }  isTransitioning = false;} // 自动播放let 
autoPlayInterval = setInterval(() => {  moveSlide(1);}, 5000); // 用户点击左右按钮也更新 
autoplaydocument.querySelectorAll(".x-arrow").forEach(btn => {  btn.addEventListener("click", () => {    clearInterval(autoPlayInterval);    moveSlide(btn.classList.contains("left") ? -1 : 1);    autoPlayInterval = setInterval(() => moveSlide(1), 5000);  });});let touchStartX = 0;let touchEndX = 0;const threshold = 50; // 触发滑动的最小距离 
carouselInner.addEventListener("touchstart", (e) => {  touchStartX = e.changedTouches[0].clientX;}); carouselInner.addEventListener("touchmove", (e) => {  touchEndX = e.changedTouches[0].clientX;}); carouselInner.addEventListener("touchend", () => {  const delta = touchEndX - touchStartX;  if (Math.abs(delta) > threshold) {    if (delta > 0) {      moveSlide(-1); // 向右滑动   
} else {      moveSlide(1); // 向左滑动    }   
// 重置 autoplay 定时器  
clearInterval(autoPlayInterval);    autoPlayInterval = setInterval(() => moveSlide(1), 5000);  }});`` 

.x-carousel {  position: relative;  width: 100%;  /*max-width: 1000px;*/  height: 400px; /* 限制高度为 400px */  margin: auto;  overflow: hidden;} .x-carousel-inner {  display: flex;  transition: transform 0.6s ease-in-out;  height: 100%; /* 继承父容器高度 */} .x-slide {  min-width: 100%;  height: 100%; /* 保持一致高度 */  position: relative;} .x-slide img {  width: 100%;  height: 100%;  object-fit: cover; /* 保证图片不变形，铺满 */  display: block;} .x-caption {  position: absolute;  bottom: 30px;  left: 30px;  color: #fff;  text-shadow: 0 0 5px rgba(0,0,0,0.6);  font-family: Lato, sans-serif;} .x-caption h2 {  margin: 0;  color: #fff;  font-size: 36px;} .x-caption p {  margin: 5px 0 0;  font-size: 16px;} .x-arrow {  position: absolute;  top: 50%;  transform: translateY(-50%);  background: rgba(0,0,0,0.5);  border: none;  color: white;  font-size: 30px;  cursor: pointer;  padding: 10px;  z-index: 10;} .x-arrow.left {  left: 10px;} .x-arrow.right {  right: 10px;}.x-slide.clone .x-caption {  display: none;} @media (max-width: 768px) {  .x-caption h2 {    font-size: 18px;  }  .x-caption p {    font-size: 14px;  }}` 

轮播+网格布局

html

<div class="feature-grid">  <div class="feature-item span-2x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB1-UNIS.jpg" alt="Enhanced Capacity">    <div class="feature-text">      <h4>ENHANCED CAPACITY</h4>      <p>Flush floor with unistrut framework.</p>    </div>  </div>   <div class="feature-item span-1x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB2-DNB.jpg" alt="Body Gear">    <div class="feature-text">      <h4>BODY GEAR</h4>      <p>Mudguards & underbody toolboxes.</p>    </div>  </div>   <div class="feature-item span-1x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB3-CORNER.jpg" alt="Weld Guard">    <div class="feature-text">      <h4>WELD GUARD</h4>      <p>Extra fracture protection.</p>    </div>  </div>   <div class="feature-item span-1x2">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB4-STOP.jpg" alt="MULTI-POSITION">    <div class="feature-text">      <h4>MULTI POSITION</h4>      <p>5 adjustable positions for gas struts.</p>    </div>  </div>   <div class="feature-item span-1x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB9-INFILL.jpg" alt="INFILL PANEL">    <div class="feature-text">      <h4>INFILL PANEL</h4>      <p>Water & dust proof rubber sealing.</p>    </div>  </div>      <div class="feature-item span-2x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB6-SEAL.jpg" alt="Seal">    <div class="feature-text">      <h4>SEAL</h4>      <p>Water & dust proof rubber sealing.</p>    </div>  </div>      <div class="feature-item span-2x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB7-LOCK.jpg" alt="SECURITY">    <div class="feature-text">      <h4>SECURITY</h4>      <p>Whale tail locks with three point locking system.</p>    </div>  </div>      <div class="feature-item span-1x1">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB8-LIGHT.jpg" alt="Seal">    <div class="feature-text">      <h4>ILLUMINATION</h4>      <p>Maxi series tail lights.</p>    </div>  </div>  </div> <!-- 移动端轮播布局 --><div class="mobile-carousel" id="carousel">      <div class="feature-item">     <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB1-UNIS.jpg" alt="Enhanced Capacity">    <div class="feature-text">      <h4>ENHANCED CAPACITY</h4>      <p>Flush floor with unistrut framework.</p>    </div>  </div>   <div class="feature-item">  <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB2-DNB.jpg" alt="Body Gear">    <div class="feature-text">      <h4>BODY GEAR</h4>      <p>Mudguards & underbody toolboxes.</p>    </div>  </div>   <div class="feature-item">   <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB3-CORNER.jpg" alt="Weld Guard">    <div class="feature-text">      <h4>WELD GUARD</h4>      <p>Extra fracture protection.</p>    </div>  </div>   <div class="feature-item">       <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB4-STOP.jpg" alt="MULTI-POSITION">    <div class="feature-text">      <h4>MULTI POSITION</h4>      <p>5 adjustable positions for gas struts.</p>    </div>  </div>      <div class="feature-item">  <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB9-INFILL.jpg" alt="INFILL PANEL">    <div class="feature-text">      <h4>INFILL PANEL</h4>      <p>Water & dust proof rubber sealing.</p>    </div>  </div>      <div class="feature-item">      <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB6-SEAL.jpg" alt="Seal">    <div class="feature-text">      <h4>SEAL</h4>      <p>Water & dust proof rubber sealing.</p>    </div>  </div>      <div class="feature-item">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB7-LOCK.jpg" alt="SECURITY">    <div class="feature-text">      <h4>SECURITY</h4>      <p>Whale tail locks with three point locking system.</p>    </div>  </div>   <div class="feature-item">    <img src="https://www.eztoolboxqld.com.au/wp-content/uploads/2025/03/CMB8-LIGHT.jpg" alt="Seal">    <div class="feature-text">      <h4>ILLUMINATION</h4>      <p>Maxi series tail lights.</p>    </div>  </div></div>   <div class="carousel-progress">    <div class="carousel-progress-bar" id="progressBar"></div>  </div>

css

/* --- PC 端 GRID --- */    .feature-grid {      display: grid;      grid-template-columns: repeat(4, 1fr);      grid-auto-rows: 200px;      gap: 12px;      padding: 20px;    }     .feature-item {      position: relative;      overflow: hidden;      background-color: #111;    }     .feature-item img {      width: 100%;      height: 100%;      object-fit: cover;      opacity: 0.85;      transition: transform 0.3s ease;    }     .feature-item:hover img {      transform: scale(1.05);    }     .feature-text {      position: absolute;      bottom: 16px;      left: 16px;      right: 16px;    }     .feature-text h4 {      margin: 0 0 4px;      font-size: 16px;      font-weight: 800;      color:#fff;      text-transform: uppercase;    }     .feature-text p {      margin: 0;      font-size: 14px;      color: #ccc;    }     .span-2x1 { grid-column: span 2; grid-row: span 1; }    .span-1x1 { grid-column: span 1; grid-row: span 1; }    .span-1x2 { grid-column: span 1; grid-row: span 2; }     .mobile-carousel {      display: none;    }    /* --- 移动端横向轮播 --- */     /* --- 响应式切换 --- */    @media (max-width: 768px) {        .mobile-carousel {  display: none;  overflow-x: auto;  overflow-y: hidden;  padding: 20px 10px;  scroll-snap-type: x mandatory;  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */  scroll-behavior: smooth;  display: flex;  gap: 12px;}.mobile-carousel::-webkit-scrollbar {  display: none; /* 隐藏滚动条 */} .mobile-carousel .feature-item {  flex: 0 0 80%;  height: 200px;  scroll-snap-align: start;  background-color: #111;  border-radius: 8px;  position: relative;}              .feature-grid {        display: none;      }       .mobile-carousel {        display: flex;      }            .carousel-progress {    margin-top: 8px;    height: 4px;    background: #444;    border-radius: 2px;    overflow: hidden;  }   .carousel-progress-bar {    height: 100%;    width: 0%;    background: #B8162F99; /* 红色进度条 */    transition: width 0.2s ease-out;  }     }
 

js

 
const carousel = document.getElementById('carousel');const progressBar = document.getElementById('progressBar'); carousel.addEventListener('scroll', () => {  const scrollLeft = carousel.scrollLeft;  const scrollWidth = carousel.scrollWidth - carousel.clientWidth;  const progress = (scrollLeft / scrollWidth) * 100;  progressBar.style.width = `${progress}%`;});``

---