我正在尝试为自己创建一个绘图工具，我在其中选择一个类别、一个时间限制，然后在单击开始按钮后，随机幻灯片将在我选择的时间播放每张图像。
现在我正在尝试设置 jQuery，以便在我按下开始之前隐藏包含幻灯片的 div。然后，幻灯片放映出现(连同一些控件，如暂停按钮)。我的问题是我不确定如何为此设置 jQuery。我需要对其进行设置，以便在我按下开始后播放幻灯片，但播放时间取决于我选择的单选按钮。我希望这是有道理的。
这是幻灯片页面的 html:
<table style="width:50px height:200px">
<ul class="controls">
<li><img class="prev" src="skip-backward.png" /></li>
<li><img class="pause" src="pause.png"></li>
<li><img class="next" src="skip-forward.png"></li>
<li><img class="stop" src="stop.png"></li>
</ul>
</table>
<!--Pics-->
<div id="pics">
<img class="allppl" src="___and_one_for_the_girlies_by_Sadiel47.jpg"/>
<img class="allppl" src="___Sheer_Stock_02____by_Symplig0th.png"/>
<img class="allppl" src="___Sheer_Stock_03____by_Symplig0th.png"/>
<img class="allppl" src="___Sheer_Stock_04____by_Symplig0th.png"/>
<img class="allppl" src="___Sheer_Stock_06____by_Symplig0th.png"/>
<img class="allppl" src="___Sheer_Stock_09____by_Symplig0th.png"/>
<img class="allppl" src="a0e54_large.jpg"/>
<img class="allppl" src="007-10-.jpg"/>
<img class="allppl" src="007-11-.jpg"/>
<img class="allppl" src="007-12-.jpg"/>
<img class="allppl" src="007-7-.jpg"/>
<img class="allppl" src="007-8-.jpg"/>
<img class="allppl" src="007-9-.jpg"/>
<img class="allppl" src="male_fighter_10_by_bobbistock.jpg"/>
<img class="allppl" src="male_fighter_3_by_bobbistock.jpg"/>
<img class="allppl" src="male_fighter_9_by_bobbistock.jpg"/>
<img class="allppl" src="relaxing.jpg"/>
<img class="allppl" src="Rendan_Touch_by_cugot12.jpg"/>
</div>
<!--Time Lengths-->
<table class="times" style="width:90%">
<tbody>
<tr class="nums">
<td>30 secs</td>
<td>1 min</td>
<td>90 secs</td>
<td>2 mins</td>
<td>5 mins</td>
</tr>
<tr>
<td><input type="radio" name="ppl" value="allppl30" id="30s" /></td>
<td><input type="radio" name="ppl" value="allppl1" id="1min" /></td>
<td><input type="radio" name="ppl" value="allppl90" id="90s" /></td>
<td><input type="radio" name="ppl" value="allppl2" id="2min" /></td>
<td><input type="radio" name="ppl" value="allppl5" id="5min" /></td>
</tr>
</tbody>
</table>
<!--Start & Home Buttons-->
<span class="lbuttons" id="start"><button type="button">Start</button></span>
<span class="lbuttons" id="home"><button type="button">Home</button></span>
这里是 jQuery。我正在为幻灯片放映使用 Cycle 2 插件。我将过去的尝试放在评论中，这样我就可以更好地跟踪哪些有效，哪些无效。
jQuery(document).ready(function () {
'use strict';
$('#pics').hide();
$('button#start').click(function () {
$('#pics').show(function () {
jQuery(this).cycle({
fx: 'fade',
next: '#pics',
speed: 30000,
random: 1
});
});
});
/*
Basic Click- WORKS (Pics appear when start is clicked and cycle isn't present)
$('#start').click(function () {
$('#pics').show();
});
First Attempt- DOESN'T WORK
if ($('button#start').is(':clicked')) {
$('#pics').show();
}
if ($('input#30s').is(':checked')) {
$('.times').hide();
jQuery('#pics').cycle({
fx: 'fade',
next: '#pics',
speed: 30000,
random: 1
});
} */
if ($('div#pics').width() >= 1000 && $('div#pics').height() >= 1100) {
$('div#pics').css('max-width', '90%');
}
});
如果这还不是很明显，此时我只是输入不同的内容以查看会发生什么。
编辑:我发现了部分问题:我需要在我的幻灯片命令中使用“超时”而不是“速度”。速度会影响转换速度，而不是幻灯片在屏幕上显示的时间。
当我使用数字输入超时时(例如，键入“timeout:30000”会使图像在屏幕上停留 30 秒)，计时器会工作，但我无法让它与 NibbCNoble 建议的变量一起工作。
这是新代码:
$(document).ready(function () {
'use strict';
$('#pics').hide();
$('.play').hide();
$('#start').click(function () {
var speedval = $("input[name=ppl]:checked").val();
$('#pics').show(function () {
$(this).cycle({
fx: 'fade',
next: '#pics',
timeout: speedval,
random: 1
});
});
});
$('.pause').click(function () {
$(this).hide();
$('.play').show();
});
$('.play').click(function () {
$(this).hide();
$('.pause').show();
});
/* Basic Click- WORKS
$('#start').click(function () {
$('#pics').show();
});
First Attempt- DOESN'T WORK
if ($('button#start').is(':clicked')) {
$('#pics').show();
}
if ($('input#30s').is(':checked')) {
$('.times').hide();
jQuery('#pics').cycle({
fx: 'fade',
next: '#pics',
speed: 30000,
random: 1
});
} */
if ($('div#pics').width() >= 1000 && $('div#pics').height() >= 1100) {
$('div#pics').css('max-width', '90%');
}
});
最佳答案
我不确定您的幻灯片放映是如何设置的，但我可以让您朝着正确方向前进的部分是单选按钮。如果您想使用这些单选按钮将值输入到每张幻灯片上花费的时间，您需要将值设置为可以输入的输入，例如多少秒。
Here is a fiddle that I started with the radio buttons value getting selected
我稍微更改了 HTML 部分
<td><input type="radio" name="ppl" value="30" id="30s" /></td>
<td><input type="radio" name="ppl" value="60" id="1min" /></td>
<td><input type="radio" name="ppl" value="90" id="90s" /></td>
<td><input type="radio" name="ppl" value="120" id="2min" /></td>
<td><input type="radio" name="ppl" value="300" id="5min" /></td>
和 javascript 部分:
jQuery(document).ready(function () {
'use strict';
$('#pics').hide();
$('button#start').click(function () {
var speedval = $("input[name=ppl]:checked").val();
$('#pics').show(function () {
jQuery(this).cycle({
fx: 'fade',
next: '#pics',
speed: speedval,
random: 1
});
});
});
/*
Basic Click- WORKS (Pics appear when start is clicked and cycle isn't present)
$('#start').click(function () {
$('#pics').show();
});
First Attempt- DOESN'T WORK
if ($('button#start').is(':clicked')) {
$('#pics').show();
}
if ($('input#30s').is(':checked')) {
$('.times').hide();
jQuery('#pics').cycle({
fx: 'fade',
next: '#pics',
speed: 30000,
random: 1
});
} */
if ($('div#pics').width() >= 1000 && $('div#pics').height() >= 1100) {
$('div#pics').css('max-width', '90%');
}
});
关于javascript - 选择两个元素时创建效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32542632/