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