选择两个项目时创建效果？

Question

我正在尝试为自己创建一个绘图工具，我在其中选择一个类别、一个时间限制，然后单击开始按钮后，随机幻灯片将在我选择的时间内播放每个图像。

现在我正在尝试设置 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 插件。我将过去的尝试放在 cmets 中，以便更好地跟踪哪些有效，哪些无效。

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%');
    }
});

Answer 1

我不确定您的幻灯片是如何设置的，但我可以让您找到正确方向的部分是单选按钮。如果您想使用这些单选按钮将值输入到每张幻灯片上花费的时间，则需要将该值设置为可以输入的输入，例如多少秒。

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%');
}

});