我有一个页面有几个按钮,当每个按钮被点击一个不同的模态弹出。一些模态是旋转木马,我的代码工作,但只有一个旋转木马,当我有一个以上的我得到额外的空幻灯片上的所有旋转木马。所以我猜我的代码是把所有旋转木马上的幻灯片数在一起。我试着写一些东西,它说,如果这个模态被点击,然后从点击模态只得到幻灯片,但我挣扎。
以下是相关代码的位:
<script>
//Carousel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
个字符
2条答案
按热度按时间kmb7vmvb1#
当你做这一行的时候
字符串
你计算了所有类名为“mySlides”的元素,这是HTML文档中的所有幻灯片。
在按钮单击例程中添加代码,以计算相应模态中的幻灯片数量:
在JavaScript的顶部添加以下内容:
型
将按钮单击更改为:
型
修改showDivs函数以包含新变量:
型
最后,将按钮的数据模式属性更改为:
型
您还需要更新以下行:
型
cwdobuhd2#
你也可以选择使用PipesJS + Modala
字符串
是的,这将创建一个3张图片的旋转木马,第一张在最后重复,每“delay='n'”毫秒它将自动移动。如果你不想让它自动移动,那很快就会完成。
点击这里:
PipesJS + Modala
您可以看到它在g0d.me - pipes下工作