Question

我有一个页面，其中有2个函数可以在文档就绪时开始。一个开始幻灯片显示淡入和淡出的图像，另一个慢慢淡化背景图像的进出。我已经实现了一个开关，当点击时，淡入新的背景图像和整体背景颜色。我正在试图弄清楚如何让这个开关也停止在文件就绪上运行的功能（或完全禁用它们以便幻灯片不会静止不动），但是再次单击时也会重新启动它们。所以基本上每次点击都会切换功能。我嘲笑了一个有图像循环的页面和一个改变图像和背景颜色的按钮（我离开了我提到的另一个功能，使它更简单，更干净）。任何帮助将不胜感激。我已经考虑添加一个全局变量，然后为函数添加一个if语句，然后让全局变为无效的点击更改，然后我尝试查看toggle-functions但没有运气。我对这一切都很陌生，所以如果我的代码混乱或混乱，我会道歉

http://jsfiddle.net/timtim123/d6xn8/2/

<body>
    <img src="http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png" id="backimg" />
    <div id="switch">
        <img src="http://i1331.photobucket.com/albums/w600/timtim123454/darkswitch_zpsc7190818.png" width="46" height="275" border="0" />
    </div>
    <div class="fadein">
        <img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide1_zps169c4a26.png" width="394" height="630" border="0" />
        <img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide2_zps72fbcc61.png" width="394" height="630" border="0" />
        <img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide3_zpsaf2fb393.png" width="394" height="630" border="0" />
        <img src="http://i1331.photobucket.com/albums/w600/timtim123454/slide4_zps9544ea88.png" width="394" height="630" border="0" />
    </div>
</body>

body {
    background:black;
    transition:background 0.2s ease;
}
.clicked {
    background:white;
}
#backimg {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
#backimg2 {
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
#switch {
    top: 0px;
    left: 100px;
    top: 300px;
    height:275px;
    position:absolute;
    z-index: 7;
}
.fadein {
    position:absolute;
    width:500px;
    height:630px;
    top: 0px;
    left: 500px;
}
.fadein img {
    position:absolute;
    top: 0px;
    left: 500px;
}


//cycle through slides
$(document).ready(function cycle() {
    timer = $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut(2000)
            .next('img').fadeIn(2000)
            .end().appendTo('.fadein');
    }, 2000);

    //switch functionality    
    $(document).ready(function () {
        $("#switch").click(function () {
            var src = $("#backimg").attr("src");
            $("body").delay(2000).queue(function () {
                $("body").toggleClass("clicked");
                $("body").dequeue();
            });


            if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png") {
                $("#backimg").fadeOut(2000, (function () {

                    $("#backimg").fadeIn(2000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png");
                }));


            } else if (src == "http://i1331.photobucket.com/albums/w600/timtim123454/background2_zps36c1126d.png") {
                $("#backimg").fadeOut(500, (function () {
                    $("#backimg").delay(5000).fadeIn(5000).attr("src", "http://i1331.photobucket.com/albums/w600/timtim123454/background_zps3f866162.png");
                }));
            }
        });
    });
});

Answer 1

1）尝试使用clearInterval执行此操作，如本页顶部http://www.w3schools.com/jsref/met_win_clearinterval.asp所示。这将停止setInterval函数。

2）要隐藏幻灯片/图片，您需要使用jQuery hide。停止一个函数不会改变DOM中的元素。

3）以下是我发给你的链接中代码的详细说明，其中包括停止和启动功能。

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<button onclick="myStartFunction()">Stop time</button>

<script>
var myVar = setInterval(function(){myTimer()},1000);

function myTimer()
{
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML=t;
}

function myStopFunction()
{
  clearInterval(myVar);
}

function myStartFunction()
{
  myVar = setInterval(function(){myTimer()},1000);
}
</script>

</body>
</html>

如果您需要更多信息，请与我们联系。

仅供参考 - 您不需要2'$（文件）.ready'只需将第二个代码放在第一个代码下即可。

jQuery使用click停止一个函数，它在doc ready上运行 - 然后再次单击时启动函数

1 个答案: