Crossslide的分页？

Question

我需要为crossslide幻灯片显示分页 任何人都可以告诉我如何在crossslide slideshow中实现分页？

提前致谢....

Answer 1

我想以下可能是一个可能的解决方案，虽然它并不完美。

例如，您将配置为：

$test3.crossSlide({
            fade: 1
        }, [
            { // #1
                src:  'sand-castle.jpg',
                alt:  'Sand Castle',
                from: '100% 80% 1x',
                to:   '100% 0% 1.7x',
                time: 3
            },
            { // #2
                src:  'flip-flops.jpg',
                alt:  'Flip Flops',
                from: '100% 80% 1.5x',
                to:   '80% 0% 1.1x',
                time: 2
            }
        ]
    );

如果用户想要查看第二张图片，您只需重新订购配置即可 再次调用crossSlide（）。第二张图片将立即显示。

$test3.crossSlide({
        fade: 1
    }, [
        { // #2
            src:  'flip-flops.jpg',
            alt:  'Flip Flops',
            from: '100% 80% 1.5x',
            to:   '80% 0% 1.1x',
            time: 2
        }, {
            //#1
            src:  'sand-castle.jpg',
            alt:  'Sand Castle',
            from: '100% 80% 1x',
            to:   '100% 0% 1.7x',
            time: 3
        }
    ]
);

例如，分页代码可以是：

<a class='change_img' data-img='1' style='cursor: pointer'>#1</a>
<a class='change_img' data-img='2' style='cursor: pointer'>#2</a>
...
<a class='change_img' data-img='5' style='cursor: pointer'>#5</a>

$('.change_img').live('click', function(){
    var images = [/* your configuration */]; 
    var idx = parseInt($(this).attr('data-img'));
    var tmp = images.splice(0, idx-1);
    images = images.concat(tmp);
    $('#your_placeholder').crossSlide({fade:1}, images);
});