功能无法识别播放/暂停幻灯片的全局变量

Question

我正在尝试为我的javascript幻灯片创建播放/暂停按钮，但由于某些范围问题，该按钮已停止我的进度。 我通过单击元素play在两个字符串值之间切换。 当功能slideshow打印输出working ，它无法打印状态并执行该功能。

这是画廊的小提琴：

小提琴现场例子

我将衷心感谢您的帮助

var state='play'
slideshow()

pause.onclick=function(){
    console.log(state)
    if (state=='play')
    {
        state='pause'
    }
    else{
        state='play'
    }
}

function slideshow(){
    console.log('working')
    if (state == 'play'){
        console.log('play')
        var pic='<img src="'+ images[slide]+'">'
            gallery.innerHTML=pic
            slide+=1;
            console.log(slide)
            if(slide-1==length){
                slide=0
            setTimeout(slideshow, 3000); 
            }   
        }
    }

Answer 1

更新了小提琴 。

请检查控制台，您可以看到未定义的错误：

未捕获的ReferenceError：幻灯片未定义（...）

当您声明幻灯片变量时，您将获得：

未捕获的ReferenceError：未定义图库（...）

您必须声明slide和gallery变量：

var slide=0;
var gallery= document.getElementsByClassName('gallery')[0];

希望这可以帮助。

Answer 2

我在这里放了一个完整的小提琴。

由于以下几个原因，您的幻灯片放映最初无法正常工作：

1. 检查滑动计数器达到最大值的时间不正确。 它必须是： if(slide==images.length){ 。

2. 你有一个}在错误的地方。 如果里面有人只设置超时if 。