在javascript幻灯片放映中显示第四张幻灯片

我一直在开发一个javascript程序，它使用幻灯片来显示不同的元素。到目前为止，我的程序正确地显示了3张幻灯片，但没有显示第四张。我仍然不明白它为什么这样做

代码如下：

$（函数（）{
var点=5；
积分++；
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
公差：“指针”，
drop：函数（事件、用户界面）{
$（本）
.addClass（“第二级”）
.查找（“p”）
.html（警报（点数-）；
}
});
$（“#可拖放2”）。可拖放({
公差：“指针”，
贪婪：错，
drop：函数（事件、用户界面）{
$（本）
.查找（“p”）
.html（警报（点数++）；
},
结束：功能（事件、用户界面）{
$（“#可拖放”）。可拖放（“禁用”）
},
结束：功能（事件、用户界面）{
$（“#可拖放”）。可拖放（“启用”）
}
});
});
$（函数（）{
var点=5；
积分++；
$（“#draggable 2”）.draggable（）；
$（“#可拖放3”）。可拖放({
公差：“指针”，
drop：函数（事件、用户界面）{
$（本）
.addClass（“第二级”）
.查找（“p”）
.html（警报（点数-）；
}
});
$（“#可拖放4”）。可拖放({
公差：“指针”，
贪婪：错，
drop：函数（事件、用户界面）{
$（本）
.查找（“p”）
.html（警报（点数++）；
},
结束：功能（事件、用户界面）{
$（“#droppable3”）.droppable（“禁用”）
},
结束：功能（事件、用户界面）{
$（“#droppable3”）.droppable（“启用”）
}
});
});
$（函数（）{
var点=5；
积分++；
$（“#draggable 5”）.draggable（）；
$（“#可拖放6”）。可拖放({
公差：“指针”，
drop：函数（事件、用户界面）{
$（本）
.addClass（“第二级”）
.查找（“p”）
.html（警报（点数-）；
}
});
$（“#可拖放6”）。可拖放({
公差：“指针”，
贪婪：错，
drop：函数（事件、用户界面）{
$（本）
.查找（“p”）
.html（警报（点数++）；
},
结束：功能（事件、用户界面）{
$（“#droppable5”）.droppable（“禁用”）
},
结束：功能（事件、用户界面）{
$（“#可拖放5”）。可拖放（“启用”）
}
});
});
$（“#打开#弹出窗口”）。单击（函数（）{
$（“弹出窗口”）.css（“显示”、“块”）；
});
$（“关闭弹出窗口”）。单击（函数（）{
$（“弹出窗口”）.css（“显示”、“无”）；
});
$（“#打开_popup2”）。单击（函数（）{
$（“#popup2”）.css（“显示”、“块”）；
});
$（“#关闭_弹出窗口2”）。单击（函数（）{
$（“#popup2”）.css（“显示”、“无”）；
});
$（“#打开_弹出窗口3”）。单击（函数（）{
$（“#popup2”）.css（“显示”、“块”）；
});
$（“#关闭#弹出窗口3”）。单击（函数（）{
$（“#popup2”）.css（“显示”、“无”）；
});
var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
对于（i=0；i幻灯片长度）{
slideIndex=1
}
对于（i=0；i

它没有显示的原因是div的顺序不正确，第三个“mySlides”div实际上包含第四个div。因此，当您将第四个div设置为display:block时，它不会显示

我已经删除了所有的点击处理程序和类似的东西，你可以看到它在下面的提琴中工作。对未来的一个建议是改变图像，使它们在视觉上完全不同，因为我认为你的第三张和第四张图像看起来非常相似

另一个技巧是将document.getElementsByClassName选择器移到函数外部，这样在执行缓慢时只执行一次

既然您已经在使用jquery，为什么不使用jquery转盘呢？

var slideIndex=0；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
放映幻灯片（）；
函数showSlides（）{
对于（变量i=0；i幻灯片长度）{
slideIndex=0；
}
setTimeout（showSlides，2000）；//每10秒更改一次图像
}

请在帖子中提供您的代码，请参阅。只包含与特定问题相关的代码。你所有的拖拽和杂项事件处理程序都没有相关性，应该删除对不起，我想发布的只是js fiddle的链接@charlietfl我发布了所有内容，因为我不确定program.HTML错误中的错误在哪里。第31行有一个结束体标记，但更糟糕的是，当我在HTML编辑器中压缩幻灯片3时，幻灯片4被隐藏：表示幻灯片4的div在幻灯片3中。

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");

showSlides();

function showSlides() {
  for (var i = 0; i < slides.length; i++) {
    if(i !== slideIndex){
        slides[i].style.display = "none";
    } else{
        slides[i].style.display = "block";
    }
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 0;
  }

  setTimeout(showSlides, 2000); // Change image every 10 seconds
}