0

好的，稍微复杂的问题。我的页面上有一个轮播（使用 CarouFredSel 插件），有时这个轮播中有 3 张图片，有时是 4 张或更多。轮播设置为一次显示 3 张图像，中心图像更大。

我的问题是，如果我只有 3 张图像，我不能左右滑动轮播以使相邻图像居中（因此更大）。为了解决这个问题，我添加了一个虚拟图像（即只写<img src="" />这样滑块认为有 4 个图像，这允许我滑动，但是，我希望能够在到达第 4 个“虚拟”图像之前停止滑块。

我的HTML如下：

<div id="wrapper">
        <div id="carousel">
            <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" />
            <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Birds.jpg" />
            <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/christmas_alt2.jpg" />
            <img src="" />

        </div>
            <a id="prev2" class="prev" href="#">&lt;</a>
            <a id="next2" class="next" href="#">&gt;</a>
    </div>

和滑块插件的jQuery：

$(function() {

            var _center = {
                width: 275,
                height: 390,
                marginLeft: 0,
                marginTop: 0,
                marginRight: 0
            };
            var _left = {
                width: 140,
                height: 200,
                marginLeft: 0,
                marginTop: 100,
                marginRight: 20
            };
            var _right = {
                width: 140,
                height: 200,
                marginLeft: 20,
                marginTop: 100,
                marginRight: 0
            };
            var _outLeft = {
                width: 100,
                height: 100,
                marginLeft: 150,
                marginTop: 200,
                marginRight: -150
            };
            var _outRight = {
                width: 100,
                height: 100,
                marginLeft: 0,
                marginTop: 200,
                marginRight: 0
            };
            $('#carousel').carouFredSel({
                auto: false,
                prev: {
                    button: "#prev2",
                    key: "left"
                },
                swipe: true,
                width: 597, 
                height: 392,
                align: false,
                items: {
                    visible: 3,
                    width: 100
                },

                next: {
                    button: "#next2",
                    key: "right",
                    items: 1,
                    duration: 400,
                    onBefore: function( data ) {
                        data.items.old.eq( 0 ).animate(_outLeft);
                        data.items.visible.eq( 0 ).animate(_left).removeClass('center right').addClass('left');
                        data.items.visible.eq( 1 ).animate(_center).addClass('center').removeClass('right left');
                        data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 }).removeClass('left center').addClass('right');
                        data.items.visible.eq( 2 ).next().css(_outRight).css({ zIndex: 0 });

                        setTimeout(function() {
                            data.items.old.eq( 0 ).css({ zIndex: 1 });
                            data.items.visible.eq( 0 ).css({ zIndex: 2 });
                            data.items.visible.eq( 1 ).css({ zIndex: 3 });
                            data.items.visible.eq( 2 ).css({ zIndex: 2 });
                        }, 200);
                    }
                },
                prev: {
                    button: "#prev2",
                    key: "left",
                    items: 1,
                    duration: 400,
                    onBefore: function( data ) {
                        data.items.old.eq( 2 ).animate(_outRight);
                        data.items.visible.eq( 0 ).animate(_left).css({ zIndex: 1 }).removeClass('center right').addClass('left');
                        data.items.visible.eq( 0 ).prev().css(_outLeft).css({ zIndex: 0 });
                        data.items.visible.eq( 1 ).animate(_center).addClass('center').removeClass('right left');
                        data.items.visible.eq( 2 ).animate(_right).removeClass('left center').addClass('right');

                        setTimeout(function() {
                            data.items.old.eq( 2 ).css({ zIndex: 1 });
                            data.items.visible.eq( 2 ).css({ zIndex: 2 });
                            data.items.visible.eq( 1 ).css({ zIndex: 3 });
                            data.items.visible.eq( 0 ).css({ zIndex: 2 });
                        }, 200);
                    }
                }
            });
            $('#carousel').children().eq( 0 ).css(_left).css({ zIndex: 2 }).addClass('left').removeClass('center right');
            $('#carousel').children().eq( 1 ).css(_center).css({ zIndex: 3 }).addClass('center').removeClass('right left');
            $('#carousel').children().eq( 2 ).css(_right).css({ zIndex: 2 }).addClass('right').removeClass('center left');
            $('#carousel').children().eq( 3 ).css(_outRight).css({ zIndex: 1 });
            $('#carousel').children().eq( 4 ).css(_outLeft).css({ zIndex: 1 });

        });

这是一个 JSFiddle，所以你可以明白我的意思：http: //jsfiddle.net/hvZzc/1/

4

1 回答 1

2

您需要在代码中添加最小值：

“Minimum: Number 创建轮播所​​需的最小项目数。如果为 null，则 items.visible 的数字被继承并增加 1。” （来自他们的网站）

将该标签添加到您的代码中，这将如下所示：

            items: {
                visible: 3,
                minimum: 3,
                width: 100
            },

代替：

            items: {
                visible: 3,
                width: 100
            },

http://jsfiddle.net/hvZzc/2/

于 2013-10-14T13:16:53.117 回答