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);
});

使用当前的jQuery Cycle幻灯片更新DIV内容

2 个答案: