我的 WordPress 主页上循环插件的暂停/播放按钮

Question

我尝试在我的首页滑块（它使用循环插件）中添加手动“暂停”和“播放”按钮，这就是我正在使用的。我尝试参考 Cycle 插件示例来让我的工作正常工作，但我缺乏 java / jquery 知识让我有点困惑。

这是我想要实现的循环插件的链接： HTTP->> jquery.malsup.com/cycle/pause.html（垃圾邮件过滤由于某种原因不允许我发布此 URL..？？？） - 我没有使用输入按钮，而是使用具有以下 ID 的 div：

    <a href="#" id="slider_pause"></a>
    <a href="#" id="slider_resume"></a>

据我了解，它不像添加“下一个”和“上一个”按钮那么容易，因为循环插件不排除 div ID 作为选项用于前进和暂停幻灯片。

对于暂停按钮，相关的 javascript 如下（取自 Cycle-plugin 网站）：

$('#pauseButton').click(function() { 
$('#s1').cycle('pause'); 
});

显然我会将 #pauseButton 更改为 #slider_pause。我会将 #s1 更改为什么？

我目前使用的 WordPress 具有以下设置以使循环插件正常工作。此时我应该在哪里添加它？

这是集成了cycle=plugin的当前wordpress主题文件代码：

    <?php 
    $jcycle_timeout = get_option('ka_jcycle_timeout');
    $jcycle_pause_hover = get_option('ka_jcycle_pause_hover');
    if ($jcycle_pause_hover == "true") {$jcycle_pause_hover_results = '1';}
    else {$jcycle_pause_hover_results = '0';}
    echo '<script type="text/javascript">
    //<![CDATA[
    TTjquery(window).load(function() {
    TTjquery(\'.home-banner-wrap ul\').css("background-image", "none");
    TTjquery(\'.jqslider\').css("display", "block");
    TTjquery(\'.big-banner #main .main-area\').css("padding-top", "16px");
    TTjquery(\'.home-banner-wrap ul\').after(\'<div class="jquery-pager">
    &nbsp;</div>\').cycle({
    fx: \'fade\',
    timeout: '.$jcycle_timeout.',
    height: \'auto\',
    pause: '.$jcycle_pause_hover_results.',
    pager: \'.jquery-pager\',
    cleartypeNoBg: true,
    prev:   \'#prev1\', 
    next:   \'#next1\' 
    });
    });
    //]]>
    </script>';
    ?>

不幸的是，它目前在本地主机上开发，我没有能力将其上传到ATM

Answer 1

#s1 它是包含应该循环的图像的元素，因此如果将其命名为 #s1，它应该保留 #s1

<script>
$(function() {
$('#slider_pause').click(function() { 
$('#s1').cycle('pause'); 
});
});

</script>

<div id='s1'>
<img....
<img....
<img....
</div>
<a href="#" id="slider_pause"></a>