帮我写个完整的discuz DIY幻灯片模板 加上css和js

好的，我可以给您提供一个基本的 Discuz DIY 幻灯片模板，您可以根据自己的需求进行二次开发。

HTML 代码：

<div class="slide-container">
  <div class="slide">
    <img src="image1.jpg" alt="Slide 1">
    <div class="slide-text">
      <h2>Slide 1 Title</h2>
      <p>Slide 1 Description</p>
    </div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
    <div class="slide-text">
      <h2>Slide 2 Title</h2>
      <p>Slide 2 Description</p>
    </div>
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
    <div class="slide-text">
      <h2>Slide 3 Title</h2>
      <p>Slide 3 Description</p>
    </div>
  </div>
</div>

CSS 代码：

.slide-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.slide-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.slide-text p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

JavaScript 代码：

const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

// Set the first slide to active
slides[currentSlide].classList.add('active');

// Start the slideshow
setInterval(() => {
  // Remove the active class from the current slide
  slides[currentSlide].classList.remove('active');

  // Move to the next slide
  currentSlide++;

  // If we've reached the end, start again from the beginning
  if (currentSlide === slides.length) currentSlide = 0;

  // Add the active class to the new current slide
  slides[currentSlide].classList.add('active');
}, 5000);

这个模板包含了一个基本的幻灯片结构，每个幻灯片包含一张图片和一些文本信息。您可以根据自己的需求进行修改。CSS 代码包含了一些基本的样式，您可以根据自己的需求进行修改。JavaScript 代码包含了一个基本的轮播逻辑，每隔 5 秒自动切换到下一张幻灯片。

希望这个模板可以对您有所帮助！