查看“微件:轮播图”的源代码

<includeonly>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
    createSlider(images)
});
    let slider = document.getElementById('slider');
    let dotsContainer = document.getElementById('dotsContainer');
    let currentSlide = 0;

    function createSlider(images, links) {
      images.forEach((obj, index) => {
        let img = document.createElement('img');
        img.src = obj.src;
        img.style.opacity = index === 0 ? 1 : 0;
        img.onclick = () => window.open(obj.link, '_blank');
        slider.appendChild(img);

        let dot = document.createElement('span');
        dot.className = 'dot';
        dot.onclick = () => jumpToSlider(index);
        dotsContainer.appendChild(dot);
      });

      dotsContainer.children[0].classList.add('active');
      
      setInterval(() => {
        nextSlide();
      }, 1000 * 5)
    }
    function updateSlider() {
      Array.from(slider.children).forEach((slide, index) => {
        slide.style.opacity = index === currentSlide ? 1 : 0;
      });

      Array.from(dotsContainer.children).forEach((dot, index) => {
        dot.classList.toggle('active', index === currentSlide);
      });
    }
    function nextSlide() {
      currentSlide = (currentSlide + 1)%images.length;
      updateSlider();
    }
    function prevSlide() {
      currentSlide = (currentSlide - 1 + images.length)%images.length;
      updateSlider();
    }
    function jumpToSlider(slideIndex) {
      currentSlide = slideIndex;
      updateSlider();
    }
</script>
</includeonly>