1

我正在使用位于http://ryrych.github.io/rcarousel/的“rcarousel - 一个连续的 jQuery UI 轮播” 。创建轮播后，我希望更改其中一个轮播窗格上的内容。我可以使用以下脚本轻松更改内容：$('#carousel').find('input.change').click(function(){$(this).parent().parent().find('div.display').html('New content');});

问题是，如果您转到另一个窗格，然后返回，“已更改”窗格将恢复为原始内容。

一个实时示例位于http://tapmeister.com/test/ryrych-rcarousel/examples/dynamic.php，脚本包含在下面。

var active=true;

$("#carousel").rcarousel(
    {
        visible: 1,
        step: 1,
        width: 780,
        height: 240,
        speed: 500,
        startAtPage: 2,
        start: function() {
            var carousel=$(this),parent=carousel.parent();
            $('#next-slide').click(function(){if(active) {carousel.rcarousel("next");}});
            $('#prev-slide').click(function(){if(active) {carousel.rcarousel("prev");}});

            for ( var i = 0; i < carousel.rcarousel( "getTotalPages" ); i++ ) {
                $("<a />",{href:'#','class':'carousel-bullet off'})
                .bind("click", {page: i},
                    function( event ) {
                        if(active) {
                            carousel.rcarousel( "goToPage", event.data.page );
                            event.preventDefault();
                        }
                    }
                )
                .appendTo( "#carousel-pages" );
            }

            // mark first page as active
            $( "a:eq(0)", "#carousel-pages" )
            .removeClass( "off" )
            .addClass( "on" )
            .css("background-image", "url(images/page-on.png)" );

            $("#next-slide, #prev-slide, .carousel-bullet" )
            .hover(
                function(){
                    if(active){$( this ).css("opacity", 0.7 );}
                },
                function(){
                    if(active){$( this ).css("opacity", 1.0 );}
                }
            );

        },
        pageLoaded: function( event, data ) {
            $( "a.on", "#carousel-pages" )
            .removeClass( "on" )
            .css("background-image", "url(images/page-off.png)" );

            $( "a", "#carousel-pages" )
            .eq( data.page )
            .addClass( "on" )
            .css("background-image", "url(images/page-on.png)" );
        }

    }
);

<div id="carousel-container">
    <div id="carousel">

        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 0</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 1</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 2</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 3</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 4</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>
        <div class="slide">
            <div class="sub-slide">
                <img src="images/throbber.gif" class="throbber" alt="Please Wait" />
                <div class="display">Display 5</div>
            </div>
            <div class="buttons">
                <input class="change" type="button" value="change">
            </div>
        </div>

    </div>
    <a href="#" id="next-slide" class="change-slide"></a>
    <a href="#" id="prev-slide" class="change-slide"></a>
    <div id="carousel-pages"></div>
</div>
4

1 回答 1

0

将以下updatePageDOM()方法添加到插件中

updatePageDOM: function() {
    var $root = $(this.element),
    data=$root.data("data");
    //Note that data.paths[data.pageIndex] and data.pages[data.pageIndex][0] is the same
    data.paths[data.pageIndex].html($root.find('div.slide').html());
},
于 2013-05-14T12:40:05.717 回答