个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个页面有 2 个功能，这些功能从文档准备就绪开始。一个开始淡入和淡出图像的幻灯片，另一个开始慢慢淡入和淡出背景图像。我实现了一个开关，单击该开关会淡入新的背景图像和整体背景颜色。我正在尝试弄清楚如何让此开关同时停止在文档准备就绪时运行的功能(或完全禁用它们以使幻灯片不会静止不动)，但在再次单击时也重新启动它们。所以基本上每次点击都会切换功能。我模拟了一个页面，其中包含图像循环和一个用于更改图像和背景颜色的按钮(我省略了我提到的其他功能，以使其更简单、更简洁)。任何帮助将不胜感激。我已经研究过添加一个全局变量，然后是函数的 if 语句，然后单击将全局变量更改为无效，然后我尝试查看切换函数但没有运气。我对这一切还很陌生，所以如果我的代码困惑或令人困惑，我深表歉意
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");
}));
}
});
});
});
最佳答案
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 '$(document).ready' 只需将第二个代码放在第一个代码下面即可。
关于javascript - jQuery 使用 click 停止函数，该函数在 doc ready 上运行 - 然后在再次单击时启动函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20938736/
25
4
0
我编写了一个 c# 程序，并在未安装 MS-Office 的 PC 中将其与文件扩展名(如 DOC)相关联。然后，我双击名称中包含空白字符的任何文件，我的程序将启动以打开该文件。我使用了以下语句: s
我试过创建、批量更新、从 https://developers.google.com/docs/api/how-tos/overview 获取. 即使在 batchUpdate 中，我也看不到编辑 t
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我正在尝试使用新 API 更新 Google 文档中的表格。表格链接自 Google 表格。 我尝试了谷歌云中的 API 资源管理器。我能够以 json 格式提取文档，然后过滤出表格。但是在表 jso
将 Google Docs Java API 与 Google Apps 帐户一起使用，是否可以模拟用户并下载文件？ 当我运行下面的程序时，它显然是登录到域并冒充用户，因为它检索其中一个文件的详细信息
我试图通过 apidoc 生成 API 文档 如果我的回应是一个数组 [ {"id" : 1, "name" : "John"}, {"id" : 2, "name" : "Mary"}
是否可以在没有身份验证的情况下在 Google Docs 中查询公开共享的用户文档？ 我正在寻找的特定最终目标是能够提供用户 ID，然后列出所有公开共享的文档，并在集合中带有特定标记。 谢谢。 最佳答
我对Elasticsearch映射感到困惑 首先，我创建了一个带有映射请求的文档 PUT /person { "mappings":{ "properties":{ "firs
我有一个可在一个电子表格中运行的 Google 文档查询。但是，当我复制电子表格时，查询不起作用，并且收到解析错误:无法解析函数 QUERY 参数 2 的查询字符串:NO_COLUMNCol2。 我的
我有一个如下所示的 XML 文档: _1 _2 TASK _3 TASK 我必须使用第一个文档中的节点属性创建另一
我没有看到什么？ RTD features页面说: PDF Generation When you build your project on RTD, we automatically build
我有一个网页，我在 iFrame 中嵌入了一个 Google 文档查看器 (其中 URL-encoded-URL 是实际编码的 URL)。 对于我的许多/大多数用户，Google PDF 文档查看器
我如何在我的项目中使用 GOOGLE DOCS，我正在使用 asp.net 和 C# 作为后面的代码。 基本上我需要在浏览器中以只读形式显示一些 pdf、doc、dox、excel 文档。 提前致谢
从看起来像的 Google Doc 开始: * Item 我希望进行一系列 API 调用以将文档转换为: * Item - Subitem 但是，我不知道如何使用 API 做到这一点。 Crea
我需要控制我网站中嵌入的 Google 文档查看器。更具体地说，我需要能够启用/禁用 Google 幻灯片 View 的控件，并能够使用 JavaScript 启动/停止演示文稿。 我无法为此找到任何
我想使用 Google Docs API 将页眉和页脚添加到现有的 Google 文档文件中. 看着documents.batchUpdate ( link ) 我们可以插入文本、替换文本、添加图像和
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 4 年前。 Improve
我已按照 GitHub 的文档进行操作，并使用 docs 成功发布了我的项目页面。我的项目存储库下的文件夹。但我想知道如何解决这个小问题: 我正在开发一个 JavaScript 库 wesa.js ，
我的程序正在创建文档，每个文档都有需要放入其中的文本。任何调用 InsertTextRequest 的尝试调用错误。 List requests = new ArrayList<>(); reques
基于此: Set field to automatically insert time-stamp on UPDATE? 我正在尝试创建适合我需要的触发器，但我发现使用 OLD 和 NEW 关键字不方
我是一名优秀的程序员,十分优秀！