开发者

Executing function after every transition using Jquery Cycle Plugin

开发者 https://www.devze.com 2023-02-21 06:53 出处:网络
$(document).ready(function(){ var $container = $(\'#main_slider\').cycle({ fx:\'fade\', speed:300, timeout: 4000
$(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 s开发者_如何学编程lideshow 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


You can use options 'before' and 'after' for this. Both of these callback functions pass current slide and next slide as parameters. Check this example: http://jquery.malsup.com/cycle/int2.html

0

精彩评论

暂无评论...
验证码 换一张
取 消