幻灯片放映中的暂停功能

Question

修改：

这是我按下按钮时出现的错误。

---

我正在使用Vegas背景滑块，我正在尝试将暂停和下一个功能添加到我的网页上。根据文档（http://vegas.jaysalvat.com/documentation/slideshow/）$.vegas('next');和$.vegas('pause');应触发每个操作。我试图在我的网页上的滑块javascript下面添加这个：

<script>
function myFunction()
{
$.vegas('pause');
}
</script>

<button onclick="myFunction()">Pause slideshow</button>

但没有成功。以下是整个幻灯片代码：

<script>
$.vegas('slideshow', { delay: 4000,
    backgrounds: [
        { src: 'IMGSRC', fade: 1000 },
    { src: 'IMGSRC', fade: 1000 },
        { src: 'IMGSRC', fade: 1000 },
        { src: 'IMGSRC', fade: 1000 },
        // { src: 'IMGSRC', fade: 1000 },
        // { src: 'IMGSRC', fade: 1000 },
    ],
    walk: function(step) {
    //alert('N°' + step + ' is now displayed');

    // get a handle on the sidebar
    var $sidebar = $('div.sidebar');

    // change menu color
    switch (step) {
    case 0: <?php if( get_field('bild1_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    case 1: <?php if( get_field('bild2_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    case 2: <?php if( get_field('bild3_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    case 3: <?php if( get_field('bild4_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    // case 4: <?php if( get_field('bild5_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    // case 5: <?php if( get_field('bild6_gogray', $originalid) ){echo 'goGray($sidebar);' ;}else{echo 'goWhite($sidebar);' ;} ?> break;
    default: goWhite($sidebar); break;
    }
}
})('overlay');

function goGray($sidebar){

$(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
        // This will fire each time the window is resized:
        if($(window).width() > 640) {
    $sidebar.removeClass('white').addClass('gray');
        } else {
    $sidebar.removeClass('white').addClass('gray');

        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});


    $('#logo_white').hide();
    $('#logo_gray').show();

}

function goWhite($sidebar){

$(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
        // This will fire each time the window is resized:
        if($(window).width() > 640) {
        $sidebar.removeClass('gray').addClass('white');
        } else {
        $sidebar.removeClass('gray').addClass('gray');

        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});

    $('#logo_gray').hide();
    $('#logo_white').show();


}


</script>

Answer 1

在您的页面中，您加载jQuery两次：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=3.8.1'></script>
...
<script src="/wp-content/themes/forsbergform.se/js/jquery.js"></script>

删除第二行，它应该有效。