使用當前的jQuery Cycle幻燈片更新DIV內容

Question

我在用jQuery Cycle幻燈片的當前幻燈片更新DIV的內容時遇到困難。

這是滑塊功能，它當前將輸出當前幻燈片作為警報（並起作用）。

$(function () {
$('#slideshow').cycle({
    fx: 'none',
    timeout: 1,
    continuation: 1,
    speed: 'fast',
    before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});

DIV如下：

<div id="test">Hello</div>

和我要使用的代碼（以替換上面的代碼的結尾）：

$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});

關於為什么DIV無法使用當前幻燈片＃更新的任何想法？ 不幸的是，什么也沒有發生。 我仍在學習有關JS的方法，因此非常感謝任何指針！ 感謝您的時間。

Answer 1

opts對象（ opts.currSlide ）中的變量未在循環函數/插件之外定義，因此您必須將其傳遞給函數

$(function () {
    $('#slideshow').cycle({
        fx: 'none',
        timeout: 1,
        continuation: 1,
        speed: 'fast',
        before: function (curr, next, opts) {
            getCurrSlide(opts.currSlide);
        }
    });
}):

function getCurrSlide(curr){
    $("#test").html(curr);
}

Answer 2

好。 我做了一個小提琴 ，有幾點要注意。 首先，當您按下按鈕時，添加到初始周期的動作將被刪除。 在這里，我使初始循環可以執行您想要的操作，並添加了一個按鈕，您可以使用該按鈕來獲取“快照”。請注意，選擇器僅獲取當前可見的圖像。

這肉：

$('#slideshow').cycle({
    fx: 'none',
    timeout: 1,
    continuation: 1,
    speed: 'fast',
    before: function (curr, next, opts) {

    $('#testNum').html("Current slide " + opts.currSlide);

    var $img = $("#slideshow img:visible").clone();
    $("#test").html('').append($img);        }
});

// The button will work after you click fast,slow, or reverse. 
//  The reason for that is the .cycle function above replaces it 
//  as fast as you can see it. 
$("#btnCopy").on("click",function(){
    var $img = $("#slideshow img:visible").clone();
    $("#test").html('').append($img);
});