模板:轮播图

   <button class="mw-carousel-prev">❮</button>
   <button class="mw-carousel-next">❯</button>

<style> .mw-carousel-container {

 width: 100%;
 margin: 0 auto 30px auto;
 position: relative;

}

.mw-carousel {

 position: relative;
 overflow: hidden;
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}

.mw-carousel-slides {

 display: flex;
 transition: transform 0.5s ease;

}

.mw-carousel-slide {

 flex: 0 0 100%;
 position: relative;

}

.mw-carousel-slide img {

 width: 100%;
 height: auto;
 display: block;

}

.mw-carousel-caption {

 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: rgba(0,0,0,0.6);
 padding: 15px;
 color: white;

}

.mw-carousel-caption h3 {

 margin: 0 0 5px 0;
 color: white;

}

.mw-carousel-caption p {

 margin: 0;
 font-size: 0.9em;

}

.mw-carousel-prev, .mw-carousel-next {

 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(255,255,255,0.5);
 color: #000;
 border: none;
 padding: 12px 16px;
 font-size: 18px;
 cursor: pointer;
 border-radius: 50%;
 transition: background-color 0.3s;

}

.mw-carousel-prev:hover, .mw-carousel-next:hover {

 background-color: rgba(255,255,255,0.8);

}

.mw-carousel-prev {

 left: 10px;

}

.mw-carousel-next {

 right: 10px;

}

.mw-carousel-dots {

 text-align: center;
 position: absolute;
 bottom: 10px;
 left: 0;
 right: 0;

}

.mw-carousel-dot {

 display: inline-block;
 width: 10px;
 height: 10px;
 margin: 0 5px;
 background-color: rgba(255,255,255,0.5);
 border-radius: 50%;
 cursor: pointer;

}

.mw-carousel-dot.active {

 background-color: white;

}

@media (max-width: 768px) {

 .mw-carousel-prev, .mw-carousel-next {
   padding: 8px 12px;
   font-size: 14px;
 }
 
 .mw-carousel-caption {
   padding: 10px;
 }
 
 .mw-carousel-caption h3 {
   font-size: 16px;
 }
 
 .mw-carousel-caption p {
   font-size: 12px;
 }

} </style>

<script> document.addEventListener('DOMContentLoaded', function() {

 const carousel = document.querySelector('.mw-carousel');
 const slidesContainer = carousel.querySelector('.mw-carousel-slides');
 const slides = carousel.querySelectorAll('.mw-carousel-slide');
 const prevButton = carousel.querySelector('.mw-carousel-prev');
 const nextButton = carousel.querySelector('.mw-carousel-next');
 const dotsContainer = carousel.querySelector('.mw-carousel-dots');
 
 let currentIndex = 0;
 const slideCount = slides.length;
 
 // Create dots
 for (let i = 0; i < slideCount; i++) {
   const dot = document.createElement('span');
   dot.classList.add('mw-carousel-dot');
   if (i === 0) dot.classList.add('active');
   dot.addEventListener('click', () => goToSlide(i));
   dotsContainer.appendChild(dot);
 }
 
 // Update display
 function updateCarousel() {
   slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
   
   // Update dots
   const dots = dotsContainer.querySelectorAll('.mw-carousel-dot');
   dots.forEach((dot, index) => {
     if (index === currentIndex) {
       dot.classList.add('active');
     } else {
       dot.classList.remove('active');
     }
   });
 }
 
 // Go to specific slide
 function goToSlide(index) {
   currentIndex = index;
   updateCarousel();
 }
 
 // Previous slide
 function prevSlide() {
   currentIndex = (currentIndex - 1 + slideCount) % slideCount;
   updateCarousel();
 }
 
 // Next slide
 function nextSlide() {
   currentIndex = (currentIndex + 1) % slideCount;
   updateCarousel();
 }
 
 // Event listeners
 prevButton.addEventListener('click', prevSlide);
 nextButton.addEventListener('click', nextSlide);
 
 // Auto slide (optional)
 let autoSlideInterval = setInterval(nextSlide, 5000);
 
 carousel.addEventListener('mouseenter', () => {
   clearInterval(autoSlideInterval);
 });
 
 carousel.addEventListener('mouseleave', () => {
   autoSlideInterval = setInterval(nextSlide, 5000);
 });
 
 // Touch support
 let touchStartX = 0;
 let touchEndX = 0;
 
 carousel.addEventListener('touchstart', e => {
   touchStartX = e.changedTouches[0].screenX;
 });
 
 carousel.addEventListener('touchend', e => {
   touchEndX = e.changedTouches[0].screenX;
   if (touchEndX < touchStartX - 50) {
     nextSlide();
   } else if (touchEndX > touchStartX + 50) {
     prevSlide();
   }
 });

}); </script>