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

<includeonly>
<script type="text/javascript">
   const images=[
      {
        src: 'https://heishenhua.wiki/w/images/wiki_bg.png',
        link: 'https://www.baidu.com'
      },
      {
        src: 'https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641',
        link: 'https://www.semantic-mediawiki.org/wiki/How_to_write_a_JavaScript_to_display_data_in_a_Semantic_MediaWiki'
      }
    ]
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 a = document.createElement('a');
        a.target = '_blank';
        a.href = obj.link;
        let img = document.createElement('img');
        img.src = obj.src;
        img.style.opacity = index === 0 ? 1 : 0;
        a.appendChild(img);
        slider.appendChild(a);

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

      dotsContainer.children[0].classList.add('active');

      let sliderPrev = document.getElementById('sliderPrev');
      let sliderNext = document.getElementById('sliderNext');
      sliderPrev.onclick = () => prevSlide();
      sliderNext .onclick = () => nextSlide();
      
      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>