微件:轮播图

 position: relative;
 width: 100%;
 margin: 0 auto;
 overflow: hidden;
 aspect-ratio: 16/9;

}

.slides {

 display: flex;
 height: 100%;
 transition: transform 0.5s ease-in-out;

}

.slide {

 min-width: 100%;
 height: 100%;
 position: relative;

}

.slide img {

 width: 100%;
 height: 100%;
 object-fit: cover;

}

/* 导航点定位优化 */ .navigation-dots {

 position: absolute;
 bottom: 30px;  /* 增加底部间距 */
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 12px;
 z-index: 10;  /* 提高层级确保显示在最前 */
 padding: 10px 15px;
 background: rgba(0,0,0,0.15);
 border-radius: 25px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.2);

}

.dot {

 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: rgba(255,255,255,0.6);
 cursor: pointer;
 transition: all 0.3s;
 position: relative;

}

.dot.active {

 background: #fff;
 transform: scale(1.3);
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}

/* 导航按钮优化 */ .prev-btn, .next-btn {

 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 44px;
 height: 44px;
 background: rgba(0,0,0,0.5);
 border: none;
 border-radius: 50%;
 cursor: pointer;
 color: white;
 font-size: 1.6rem;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: all 0.3s;
 z-index: 10;

}

.slider-container:hover .prev-btn, .slider-container:hover .next-btn {

 opacity: 1;

}

.prev-btn { left: 25px; } .next-btn { right: 25px; }

/* 移动端适配 */ @media (max-width: 768px) {

 .slider-container {
   aspect-ratio: 3/2;
 }
 
 .prev-btn, .next-btn {
   width: 36px;
   height: 36px;
   font-size: 1.4rem;
 }
 
 .navigation-dots {
   bottom: 20px;
   padding: 8px 12px;
 }
 
 .dot {
   width: 12px;
   height: 12px;
 }

}

@media (max-width: 480px) {

 .slider-container {
   aspect-ratio: 1;
 }
 
 .prev-btn, .next-btn {
   display: none;
 }
 
 .navigation-dots {
   bottom: 15px;
   gap: 8px;
   padding: 6px 10px;
 }
 
 .dot {
   width: 10px;
   height: 10px;
 }

} </style>

     <a href="https://www.araceae.cn/" target="_blank">
       <img src="https://www.araceae.cn/images/0/0c/Xctu.png">
     </a>

     <a href="https://www.araceae.cn/" target="_blank">
       <img src="https://www.araceae.cn/images/0/0c/Xctu.png">
     </a>

     <a href="http://www.long.club/" target="_blank">
       <img src="https://www.araceae.cn/images/0/0c/Xctu.png">
     </a>

 <button class="prev-btn">‹</button>
 <button class="next-btn">›</button>

 constructor() {
   this.slider = document.querySelector('.slider-container');
   this.slides = document.querySelector('.slides');
   this.dotsContainer = document.querySelector('.navigation-dots');
   this.slideItems = Array.from(document.querySelectorAll('.slide'));
   this.currentIndex = 0;
   this.isAnimating = false;
   this.autoPlayTimer = null;
   
   this.init();
 }

 init() {
   this.createDots();
   this.bindEvents();
   this.startAutoPlay();
 }

 createDots() {
   this.dotsContainer.innerHTML = this.slideItems
     .map((_, index) =>

`

     )
     .join();
 }

 bindEvents() {
   document.querySelector('.prev-btn').addEventListener('click', () => this.goToSlide(this.currentIndex - 1));
   document.querySelector('.next-btn').addEventListener('click', () => this.goToSlide(this.currentIndex + 1));
   
   this.dotsContainer.addEventListener('click', (e) => {
     const dot = e.target.closest('.dot');
     if (dot) {
       const index = parseInt(dot.dataset.index);
       this.goToSlide(index);
     }
   });

   this.slider.addEventListener('touchstart', e => {
     this.startX = e.touches[0].clientX;
   });

   this.slider.addEventListener('touchend', e => {
     const deltaX = e.changedTouches[0].clientX - this.startX;
     if (Math.abs(deltaX) > 50) {
       this.goToSlide(deltaX > 0 ? this.currentIndex - 1 : this.currentIndex + 1);
     }
   });

   window.addEventListener('resize', () => {
     this.slides.style.transition = 'none';
     this.slides.style.transform = `translateX(-${this.currentIndex * 100}%)`;
     setTimeout(() => {
       this.slides.style.transition = 'transform 0.5s ease-in-out';
     }, 50);
   });
 }

 goToSlide(index) {
   if (this.isAnimating) return;
   
   const total = this.slideItems.length;
   this.currentIndex = (index + total) % total;
   this.isAnimating = true;

   this.slides.style.transform = `translateX(-${this.currentIndex * 100}%)`;
   this.updateDots();
   this.resetAutoPlay();

   setTimeout(() => {
     this.isAnimating = false;
   }, 500);
 }

 updateDots() {
   document.querySelectorAll('.dot').forEach((dot, index) => {
     dot.classList.toggle('active', index === this.currentIndex);
   });
 }

 startAutoPlay() {
   this.autoPlayTimer = setInterval(() => {
     this.goToSlide(this.currentIndex + 1);
   }, 4000);
 }

 resetAutoPlay() {
   clearInterval(this.autoPlayTimer);
   this.startAutoPlay();
 }

}

document.addEventListener('DOMContentLoaded', () => new Slider()); </script>