时间戳

首页 > 解决方案 > 在同一页面上的多个画廊上使用幻灯片功能

javascript - 在同一页面上的多个画廊上使用幻灯片功能

问题描述

我在一个页面上有多个具有相同课程的画廊。我添加了一个滑块JavaScript function。它可以工作，但是如果我关闭灯箱（当前滑块）并打开另一个灯箱，它会从上一个幻灯片索引开始，滑块更改更快并且出现控制台错误：Uncaught TypeError: document.querySelector(...) is null 这是简化的 JS 代码：

var slideNum = 0;
var slides;

function showSlides() {
    var i;
    slides = document.querySelector("#Images").childNodes;
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideNum++;
    if (slideNum> slides.length) {slideNum = 1}  
    slides[slideNum-1].style.display = "block";
    setTimeout(showSlides, 3000); 
}

有没有办法停止并在另一个画廊上function启动它？onclick

标签： javascript

解决方案

也许以下内容可能会有所帮助。它使用从主函数中调用的自执行匿名函数来返回当前slideNum变量......当加载新画廊时，该变量仍然存在。我很欣赏，这可能与您的画廊设置不太相似，但毫无疑问可以进行调整。

var pause=10;
var slideNum = 0;
var slides;
var tx=NaN;

const clearslides=function( id ){
  document.querySelectorAll('.ss > img').forEach( img=>{
    img.style.display='none';
  })
  slides=document.querySelectorAll('#'+id+' > img');
  return slides;
}

const showSlides=function( id ){
  slideNum--;   // so that when next slideshow is invoked the index does not increment up

  console.clear();
  console.info( 'New Slideshow:%s, Index:%d', id, slideNum );

  if( !isNaN( tx ) )clearTimeout( tx );
  slides=clearslides( id );

  slideNum=function(){
    if( slideNum < 0 || slideNum >= slides.length )slideNum=0;
    clearslides( id );
    slides[ slideNum ].style.display='block';

    console.info( 'Gallery:%s, Index:%d - Title:%s', id, slideNum, slides[ slideNum ].title );

    tx=setTimeout( arguments.callee, 1000 * pause );

    slideNum++;
    return slideNum;
  }();
};
div.ss{margin:1rem auto;}
div > img{display:none}
img{width:300px;height:200px}
a{text-decoration:none;font-family:monospace;}
a:hover{text-decoration:underline;color:red}
a:after{content:'|';margin:0 1rem;}
a:last-of-type:after{content:none}
<a href='#' onclick=showSlides('images-1')>Gallery-1</a>
<a href='#' onclick=showSlides('images-2')>Gallery-2</a>
<a href='#' onclick=showSlides('images-3')>Gallery-3</a>        

<div class='ss' id='images-1'>
  <img src='//picsum.photos/300/200?random=1' title='gallery:1 slide:0' />
  <img src='//picsum.photos/300/200?random=2' title='gallery:1 slide:1' />
  <img src='//picsum.photos/300/200?random=3' title='gallery:1 slide:2' />
</div>

<div class='ss' id='images-2'>
  <img src='//picsum.photos/300/200?random=4' title='gallery:2 slide:0'  />
  <img src='//picsum.photos/300/200?random=5' title='gallery:2 slide:1'  />
  <img src='//picsum.photos/300/200?random=6' title='gallery:2 slide:2'  />
</div>

<div class='ss' id='images-3'>
  <img src='//picsum.photos/300/200?random=7' title='gallery:3 slide:0'  />
  <img src='//picsum.photos/300/200?random=8' title='gallery:3 slide:1'  />
  <img src='//picsum.photos/300/200?random=9' title='gallery:3 slide:2'  />
</div>

推荐阅读