jquery - Jquery ui 图像循环器

Question

我一直在使用 jquery ui 进行开发。今天我被困在图像循环仪上。默认图像滑块代码适用于 3 张图片。我的网站上有 30 张图片，我必须使用 ui-cycler 流畅地循环它，但这是不可能的。为了使它工作，我必须在图像循环器开始发挥作用之前点击静态图片 X 时间。这是 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: "#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>

这是我的图片参考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>

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

Answer 1

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

<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>

以下是图片：

<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>