怎么去2张幻灯片

时间:2014-09-21 00:39:24

标签: jquery slideshow jquery-cycle2

我有3张“主要”幻灯片。每个“主”幻灯片之间有一个“中间”幻灯片,我希望通过点击相应的按钮我可以达到以下效果

("go to slide 1", "go to slide 2","go to slide 3")

当用户点击button1 (“转到幻灯片1”)

1)$('.cycle-slideshow').cycle('goto', intermediate slide);

2)执行任务(我需要一个中间幻灯片图像来创建放大效果)

2)$('.cycle-slideshow').cycle('goto', 1);

如此......

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

也许尝试这样的事情。我还没有测试过它。但是你想使用高级cycle2 api来编写你自己的goto(jump)处理程序,按照这个页面:http://jquery.malsup.com/cycle2/api/advanced.php

这里是默认的跳转功能(搜索跳转:功能):https://github.com/malsup/cycle2/blob/45fde557e8fb4c2d59a9667ba744b63a0da9916c/build/jquery.cycle2.js

所以这里是他们功能的修改版本(再次没有经过测试!):

$('.cycle-slideshow').on('cycle-bootstrap', function (e, optionHash, API) {
    // replace "jump (goto)" method with custom implementation.
    // This next part is the same as the original
    API.jump = function (index, fx) {
        var fwd;
        var opts = this.opts();
        if (opts.busy && !opts.manualTrump)
            return;
        var num = parseInt(index, 10);
        if (isNaN(num) || num < 0 || num >= opts.slides.length) {
            opts.API.log('goto: invalid slide index: ' + num);
            return;
        }
        if (num == opts.currSlide) {
            opts.API.log('goto: skipping, already on slide', num);
            return;
        }

        // put the remaining code in a function so you can call it twice
        function jump_inner(num) {
            opts.nextSlide = num;
            clearTimeout(opts.timeoutId);
            opts.timeoutId = 0;
            opts.API.log('goto: ', num, ' (zero-index)');
            fwd = opts.currSlide < opts.nextSlide;
            opts._tempFx = fx;
            opts.API.prepareTx(true, fwd);
        }

        // figure out the intermediate slide.  i'm just guessing on how you want to do this.  change the logic to whatever you need, or maybe the intermediate slide is the same for each button.
        var intermediate;
        switch (num) {
            case '1': 
                intermediate = 4;
                break;
            case '2': 
                intermediate = 5;
                break;
            case '3': 
                intermediate = 6;
                break;
        }

        // first do the intermediate.
        jump_inner(intermediate);

        // use setTimeout to wait some time then do the next slide
        setTimeout("jump_inner(num);", 2000);
    }
});