如何在启动另一个循环函数时通过单击停止jquery循环函数

您好，我是一个编程新手，所以我对使用jQuery不太熟悉，但我想用它解决一个问题

我在尝试制作一个“动画/幻灯片”，在那里我有两个不同的绿色烟雾图像，它们会淡入淡出，所以有点像“真实”烟雾。我可以在jQuery中这样做，所以它是循环的，但是我想在另一个类似的循环函数启动时，当我单击一个特定的按钮时，停止绿色烟雾循环的这个功能，但是使用另一种颜色的烟雾图像，比如红色或蓝色

我在jQuery中有以下代码：

function startSlideshow(){
    $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
    $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //55000
}

$(document).ready(function(){
    startSlideshow();
});

我的css：

.greensmoke1 {
    background-position: center;
    background-image: url(game/scene11.png);
    width: 880px;
    height: 660px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: none;
}

.greensmoke2 {
    background-position: center;
    background-image: url(game/scene11b.png);
    width: 880px;
    height: 660px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: none;
}

我不知道如何制作一个停止循环的按钮，所以我尝试在CSS中制作一个可点击的框，当你点击它时，烟雾的“可见性”将设置为“隐藏”。它起作用了，但我觉得有点乱

$(function() {
    $("#button").click(function(e){
        $(".greensmoke1").css("visibility", "hidden");
        $(".greensmoke2").css("visibility", "hidden");
    });
}

我希望当你点击#按钮时，它会停止循环，但同时启动一个新循环，直到你点击另一个按钮

我希望你能帮上忙，这已经困扰了我两天了！谢谢

更新

我只是试着像这样添加Vladimir的代码：

$(document).ready(function() {
    function startSlideshow(){
        $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
        $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //55000
    }

    $(document).ready(function(){
        startSlideshow();
    });

    $("#button").on("click",function(){
        $(".greensmoke1").css ("visibility", "hidden");
        $(".greensmoke2").css ("visibility", "hidden");
        $(".bluesmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
        $(".bluesmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //5500
    });

});

我添加了（“可见性”、“隐藏”）；因为我想阻止绿色烟雾（隐藏它们，即使它们是display:none；在css中）。该按钮与此配合使用，因为绿色烟雾消失，但没有被蓝色烟雾动画替换。。即使我没有添加（“可见性”、“隐藏”）；代码

我真的不知道这段代码出了什么问题，因为当我单击按钮时它会工作，它会隐藏烟雾，但不会开始添加蓝色烟雾..：/

我会尝试guest271314的代码，然后我会回来更新！：）

您可以尝试：

   $(document).ready(function(){ 
        $("#button").on('click',function(){
             $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000); //13000
             $(".greensmoke2").delay(5000).fadeIn(2000).delay(1500).fadeOut(2000, startSlideshow); //5500
        }
    }

或者类似的东西。我想你可以用任何元素来代替按钮。 如果有帮助，请告诉我。

试试看

$(document).ready(function () {
    // added `class*=smoke` selector for `greensmooke` or `bluesmoke`
    var smoke = $("[class*=smoke]");   
    function startSlideshow() {    
        $(".greensmoke1").fadeIn(2000).delay(1500).fadeOut(2000)
        .siblings(".greensmoke2").delay(5000).fadeIn(2000)
        .delay(1500).fadeOut(2000, function () {
            if (smoke.data("stop")) {
                smoke.stop(true, true)
            } else {
                startSlideshow()
            }
        });
    };
    startSlideshow();
    $("button").on("click", function () {
        // stop slideshow
        smoke.data("stop", true)
        // check `background-image` , `backgroundColor`
        .css("backgroundColor", smoke.eq(0)
        // toggle `background-image` , `backgroundColor`
        .css("backgroundColor") === "rgb(0, 128, 0)" ? "blue" : "green")
        // start slideshow
        .data("stop", false);
        startSlideshow()
    })
});

$（文档）.ready（函数（）{
var smoke=$（“[class*=smoke]”）；
函数startSlideshow（）{
美元（“.greensmoke1”）.fadeIn（2000）.delay（1500）.fadeOut（2000）
.兄弟姐妹//13000
（“.greensmoke2”）。延迟（5000）。法代因（2000）
.延迟（1500）.衰减（2000，功能（）{
if（烟雾数据（“停止”））{
冒烟。停止（真的，真的）
}否则{
startSlideshow（）
}
}); //55000
};
startSlideshow（）；
$（“按钮”）。在（“单击”）上，函数（）{
烟雾数据（“停止”，真）
.css（“backgroundColor”，smoke.eq（0）.css（“backgroundColor”）=“rgb（0，128，0）”？“蓝色”：“绿色”）
.数据（“停止”，错误）；
startSlideshow（）
})
});
.greensmoke1、.greensmoke2{
背景位置：中心；
背景颜色：绿色；
宽度：880px；
高度：660px；
背景大小：100%；
背景重复：无重复；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
显示：无；
}

点击
谢谢！有点像这样！但是如果我想从css向toogle添加另外两个图像呢？因为当我这样写的时候，按钮不会在点击时做出响应：.css（“.bluesmoke1”，smoke.eq（0.css（“.bluesmoke2”））@Alex378 Try
.css（“.backgroundImage”，smoke.eq（0.css”（“backgroundImage”）==“url（game/scene11.png）”？“url（game/path/to/other image）”：“url（game/scene11.png）”
，其中
/path/to/other image
将是要切换的图像的
url
。stacksnippets示例利用了
backgroundColor
，但模式相同：1）停止动画；2） 检查当前背景（颜色或图像）；3） 切换背景（颜色或图像）；4） 启动动画。看到了吗，在这里展示拼图是很有效的！：）谢谢你！我让绿色烟雾（第一张图片）变为蓝色烟雾（另一张图片），尽管我希望它在两张不同的蓝色烟雾图片之间循环。所以它从两张绿色烟雾循环的图像变成了另外两张蓝色烟雾的图像。它只在我这样写的时候对我有用：.css（“backgroundImage”，smoke.eq（0.css（“backgroundImage”）==“url（game/scene11.png）”？“url（game/bluesmoke.png）”：“url（game/bluesmoke.png）”）