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

Question

I've tried adding a manual "Pause" and "play" button to my frontpage slider (It uses cycle-plugin) is what I'm using. I've tried refering to the cycle plugin examples to get mine working, but my lack of java / jquery knowledge has me slightly puzzled.

Here is the link to the cycle plugin on what I want to achieve: HTTP ->> jquery.malsup.com/cycle/pause.html (spam filtering won't let me post this URL for some reason..????) - Instead of using an input button, I am using a div with ID's of the following:

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

From what I understands its not as easy as adding "Next" and "prev" buttons as the cycle plugin doesn't except div ID's as an option for advancing and pausing the slideshow.

For the pause button the javascript in question is as follows (taken from the cycle-plugin website):

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

Obviously I would change #pauseButton to #slider_pause. What would I change #s1 to?

The wordpress them I am using currently has the following setup to make the cycle-plugin work. Where would I add it at this point?

Here is the currenty wordpress theme file code that integrates the cycle=plugin:

    <?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>';
    ?>

Unfortunately its on a localhost development at the moment and I don't have the ability to upload it ATM

Answer 1

#s1 it is element that contains images that should be cycled so if you name it as #s1 it should stay #s1

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

</script>

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