使用當前jQuery更新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

確定。我做了一個fiddle，有幾件事要注意。首先，當您按下按鈕時，添加到初始週期的動作將被刪除。在這裏，我已經完成了你想要的初始循環，並添加了一個你可能用來獲得「快照」的按鈕。注意選擇器只能獲取當前可見的圖像。

肉：

$('#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); 
});