模板:轮播图：修订间差异

来自黑神话百科
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
第1行： 第1行：
<div class="slider-container">
<div class="slider-container">
   <div class="slider" id="slider"></div>
   <div class="slider" id="slider"></div>
   <div class="arrow prev" onclick="prevSlide()"><</div>
   <div class="arrow prev" id="sliderPrev"><</div>
   <div class="arrow next" onclick="nextSlide()">></div>
   <div class="arrow next" id="sliderNext">></div>
   <div class="dots" id="dotsContainer"></div>
   <div class="dots" id="dotsContainer"></div>
</div>
</div>
<includeonly>
{{#Widget:轮播图}}
<script type="text/javascript">
    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();
    }
    let 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'
      }
    ];
    createSlider(images)
</script>
</includeonly>
{{#css:
{{#css:
.slider-container {
.slider-container {

2024年8月18日 (日) 12:16的版本

取自“https://heishenhua.wiki/w/index.php?title=模板:轮播图&oldid=1007”