使用 Jquery Cycle Plugin 在每次转换后执行函数

发布于 2024-10-30 06:25:02 字数 695 浏览 4 评论 0原文

$(document).ready(function(){

var $container = $('#main_slider').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 4000
}); 

$container.children().each(function(i) { 
    // create input 
    $('#thumb-'+(i+1)).click(function() { 
            // cycle to the corresponding slide 
            $("#black-bars").animate({"top": ''+(i*76.5)+'px'}, "slow", "swing");
            $container.cycle(i); 
            return false; 
        }); 
}); 

});

我有一个带有侧拇指的简单幻灯片，当单击它们时，黑条会滑动到适当的位置以“突出显示”它。

现在，这种效果仅在用户手动单击拇指时才会发生，因此我希望它在每张幻灯片转换后也能自动生成动画。

我认为 Cycle 有一个 After 属性，允许您在每张幻灯片之后执行一个函数，但是我如何创建一个计数器或检索它当前所在的幻灯片“编号”？我需要它来确定黑条的位置。

谢谢

原文

$(document).ready(function(){

var $container = $('#main_slider').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 4000
}); 

$container.children().each(function(i) { 
    // create input 
    $('#thumb-'+(i+1)).click(function() { 
            // cycle to the corresponding slide 
            $("#black-bars").animate({"top": ''+(i*76.5)+'px'}, "slow", "swing");
            $container.cycle(i); 
            return false; 
        }); 
}); 

});

I have simple slideshow that has side thumbs, and when they are clicked the black bars slide to their appropriate position to "highlight" it.

Now, this effect only occurs when the user manually clicks the thumb, so I want it to also animate automatically after each slide has transitioned.

I think Cycle has a After attribute that allows you to execute a function after every slide, however how would I create a counter or retrieve which slide "number" it is currently on? I need it to determine what the position should be for the black bars.

Thanks

分享到QQ

分享到微博