jqueryui图像循环器

我一直在使用jQueryUI进行开发。今天我被图像自行车卡住了。默认的图像滑块代码用于3张图片。我的网站上有30张图片，我必须使用ui cycler流畅地循环，但这是不可能的。为了让它工作，我必须在图像循环器开始工作之前点击静态图片X时间。以下是3幅图像的cycler代码：

<script>
    $(function() {
        // TODO refactor into a widget and get rid of these plugin methods
        $.fn.left = function( using ) {
            return this.position({
                my: "right middle",
                at: "left+25 middle",
                of: "#container",
                collision: "none",
                using: using
            });
        };
        $.fn.right = function( using ) {
            return this.position({
                my: "left middle",
                at: "right-25 middle",
                of: "#container",
                collision: "none",
                using: using
            });
        };
        $.fn.center = function( using ) {
            return this.position({
                my: "center middle",
                at: "center middle",
                of: "#container",
                using: using
            });
        };

        $( "img:eq(0)" ).left();
        $( "img:eq(1)" ).center();
        $( "img:eq(2)" ).right();

        function animate( to ) {
            $( this ).stop( true, false ).animate( to );
        }
        function next( event ) {
            event.preventDefault();
            $( "img:eq(2)" ).center( animate );
            $( "img:eq(1)" ).left( animate )
            $( "img:eq(0)" ).right().appendTo( "#container" );
        }
        function previous( event ) {
            event.preventDefault();
            $( "img:eq(0)" ).center( animate );
            $( "img:eq(1)" ).right( animate );
            $( "img:eq(2)" ).left().prependTo( "#container" );
        }
        $( "#previous" ).click( previous );
        $( "#next" ).click( next );

        $( "img" ).click(function( event ) {
            $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
        });

        $( window ).resize(function() {
            $( "img:eq(0)" ).left( animate );
            $( "img:eq(1)" ).center( animate );
            $( "img:eq(2)" ).right( animate );
        });
    });
    </script>

$（函数（）{
//TODO重构成一个小部件并去掉这些插件方法
$.fn.left=函数（使用）{
返回这个位置({
我的：“右中”，
在：“左+25中”，
其中：“集装箱”，
碰撞：“无”，
使用：使用
});
};
$.fn.right=函数（使用）{
返回这个位置({
我的：“左中”，
在：“右25中”，
其中：“集装箱”，
碰撞：“无”，
使用：使用
});
};
$.fn.center=函数（使用）{
返回这个位置({
我的：“中间”，
在“中间”，
其中：“集装箱”，
使用：使用
});
};
$（“img:eq（0）”）.left（）；
$（“img:eq（1）”）.center（）；
$（“img:eq（2）”）.right（）；
函数设置动画（到）{
$（此）。停止（真、假）。设置动画（到）；
}
功能下一步（事件）{
event.preventDefault（）；
$（“img:eq（2）”）。中心（动画）；
$（“img:eq（1）”）。左（动画）
$（“img:eq（0）”）.right（）.appendTo（“#container”）；
}
功能上一个（事件）{
event.preventDefault（）；
$（“img:eq（0）”）。中心（动画）；
$（“img:eq（1）”）。右（动画）；
$（“img:eq（2）”）.left（）.prependTo（“#容器”）；
}
$（“#上一页”）。单击（上一页）；
$（“#下一步”）。单击（下一步）；
$（“img”）。单击（函数（事件）{
$（“img”）。索引（本）==0？上一个（事件）：下一个（事件）；
});
$（窗口）。调整大小（函数（）{
$（“img:eq（0）”）。左（动画）；
$（“img:eq（1）”）。中心（动画）；
$（“img:eq（2）”）。右（动画）；
});
});

这是我的图片参考html：

    <div id="container">

        <img class = "slide"  src="images/slide1.jpg"  alt="Race2"/>
        <img class="slide" src="images/slide2.jpg"  alt="Akshay Kumar"/>
        <img class = "slide" src = "images/slide_eng1.jpg" alt = "English Roller"/>
        <img class = "slide" src = "images/slide_eng2.jpg" alt = "Bruce Willis"/>
<!-- still many image -->
    </div>

---

我应该怎么做才能让它工作？

首先，您必须使用函数ext_right隐藏其余图像（索引3及以上），并且您应该更改追加和前置，如下所示：

<script>
        $(function () {
            // TODO refactor into a widget and get rid of these plugin methods
            $.fn.left = function (using) {
                return this.position({
                    my: "right middle",
                    at: "left+25 middle",
                    of: "#image_container",
                    collision: "none",
                    using: using
                });
            };
            $.fn.right = function (using) {
                return this.position({
                    my: "left middle",
                    at: "right-25 middle",
                    of: "#image_container",
                    collision: "none",
                    using: using
                });
            };
            $.fn.center = function (using) {
                return this.position({
                    my: "center middle",
                    at: "center middle",
                    of: "#image_container",
                    using: using
                });
            };

            $.fn.ext_right = function () {
                return this.position({
                    my: "left middle",
                    at: "right+30 middle",
                    of: "#image_container",
                    collision: "none",
                });
            };

            $("img.cycler:eq(0)").left();
            $("img.cycler:eq(1)").center();
            $("img.cycler:eq(2)").right();

            /*Place the rest of the image_container images hidden to the right*/
            $("img.cycler:gt(2)").ext_right();

            function animate(to) {
                $(this).stop(true, false).animate(to);
            }

            function next(event) {
                event.preventDefault();
                $("img.cycler:eq(2)").center(animate);
                $("img.cycler:eq(1)").left(animate)
                //$("img.cycler:eq(0)").right().appendTo("#image_container");                
                $("img.cycler:eq(3)").right();
                $("img.cycler:eq(0)").ext_right().appendTo("#image_container");
            }
            function previous(event) {
                event.preventDefault();
                $("img.cycler:eq(0)").center(animate);
                $("img.cycler:eq(1)").right(animate);                                
                //$("img.cycler:eq(2)").left().prependTo("#image_container");
                $("img.cycler:eq(2)").ext_right();
                $("img.cycler:last").left().prependTo("#image_container");                                
            }

            $("#previous").click(previous);
            $("#next").click(next);

            $("img.cycler").click(function (event) {
                $("img.cycler").index(this) === 0 ? previous(event) : next(event);
            });

            $(window).resize(function () {
                $("img.cycler:eq(0)").left(animate);
                $("img.cycler:eq(1)").center(animate);
                $("img.cycler:eq(2)").right(animate);
            });
        });
    </script>

$（函数（）{
//TODO重构成一个小部件并去掉这些插件方法
$.fn.left=函数（使用）{
返回这个位置({
我的：“右中”，
在：“左+25中”，
of:#image_container“，
碰撞：“无”，
使用：使用
});
};
$.fn.right=函数（使用）{
返回这个位置({
我的：“左中”，
在：“右25中”，
of:#image_container“，
碰撞：“无”，
使用：使用
});
};
$.fn.center=函数（使用）{
返回这个位置({
我的：“中间”，
在“中间”，
of:#image_container“，
使用：使用
});
};
$.fn.ext_right=函数（）{
返回这个位置({
我的：“左中”，
在：“右+30中”，
of:#image_container“，
碰撞：“无”，
});
};
$（“img.cycler:eq（0）”）.left（）；
$（“img.cycler:eq（1）”）.center（）；
$（“img.cycler:eq（2）”）.right（）；
/*将图像容器图像的其余部分隐藏到右侧*/
$（“img.cycler:gt（2）”）.ext_right（）；
函数设置动画（到）{
$（此）。停止（真、假）。设置动画（到）；
}
功能下一步（事件）{
event.preventDefault（）；
$（“img.cycler:eq（2）”）.center（动画）；
$（“img.cycler:eq（1）”）。左（动画）
//$（“img.cycler:eq（0）”）.right（）.appendTo（“#image_容器”）；
$（“img.cycler:eq（3）”）.right（）；
$（“img.cycler:eq（0）”）.ext_right（）.appendTo（“#image_container”）；
}
功能上一个（事件）{
event.preventDefault（）；
$（“img.cycler:eq（0）”）.center（动画）；
$（“img.cycler:eq（1）”）。右（动画）；
//$（“img.cycler:eq（2）”）.left（）.prependTo（“图像容器”）；
$（“img.cycler:eq（2）”）.ext_right（）；
$（“img.cycler:last”）.left（）.prependTo（“#image_容器”）；
}
$（“#上一页”）。单击（上一页）；
$（“#下一步”）。单击（下一步）；
$（“img.cycler”）。单击（函数（事件）{
$（“img.cycler”）.index（this）==0？上一个（事件）：下一个（事件）；
});
$（窗口）。调整大小（函数（）{
$（“img.cycler:eq（0）”）。左（动画）；
$（“img.cycler:eq（1）”）.center（动画）；
$（“img.cycler:eq（2）”）。右（动画）；
});
});

以下是图片：

<div id="image_container">                    
                    <img class="cycler" src="images/flight.jpg" width="512" height="307" alt="flight" />
                    <img class="cycler" src="images/rocket.jpg" width="300" height="353" alt="rocket" />
                    <img class="cycler" src="images/earth.jpg" width="458" height="308" alt="earth" /> 
                    <img class="cycler" src="images/high_tatras.jpg" width="512" height="307" alt="flight" />
                    <img class="cycler" src="images/high_tatras2.jpg" width="300" height="353" alt="rocket" />
                    <img class="cycler" src="images/high_tatras3.jpg" width="458" height="308" alt="earth" />                    
                <a id="previous" href="#">Previous</a>  <a id="next" href="#">Next</a>
</div>

---

我尝试添加了很多东西，比如给img编号：