更新DIV内容与当前的jQuery循环幻灯片

Update DIV contents with current jQuery Cycle slide

本文关键字：jQuery 循环 幻灯片 DIV 更新      更新时间：2023-09-26

我在用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，所以任何指针都非常感激!感谢您的宝贵时间。

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

OK。我做了一个小提琴，有几件事要注意。首先，当你点击按钮时，你添加到初始循环中的动作将被删除。在这里，我已经让初始循环做了你想做的事情，并添加了一个按钮，你可以使用它来获取"快照"。注意选择器只获取当前可见的图像。

肉:

$('#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);
});
相关文章：