Question

在同一个网页上用jcarousel plugin为每个梯子提供外部控制,玩 the多头li,但冲撞了控制,使所有的利器都不是控制的对象! 本条准则:

<div id="mycarousel">
    <ul>
    <li>item</li>
    <li>item</li>
    </ul>
<div class="control">
  <a href="#" class="nav_active">1</a>
  <a href="#">2</a>
</div>  
 </div>          
<div id="mycarousel_2">
    <ul>
    <li>item</li>
    <li>item</li>
    </ul>
<div class="control">
  <a href="#" class="nav_active">1</a>
  <a href="#">2</a>
</div>

The JS

/**
 * We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery( .control a ).bind( click , function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    $( .control a ).removeClass( nav_active );
    $(this).addClass( nav_active );
    return false;
}); 
jQuery( .jcarousel-scroll select ).bind( change , function() {
    carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
    return false;
});
 };

  // Ride the carousel...
 jQuery(document).ready(function() {
jQuery("#mycarousel, #mycarousel_2").jcarousel({
    scroll: 1,
    animation: 1000,
    easing:  easeOutQuart ,
    vertical: true,
    initCallback: mycarousel_initCallback,
    // This tells jCarousel NOT to autobuild prev/next buttons
    buttonNextHTML: null,
    buttonPrevHTML: null
});
});

请帮助,我需要使每个梯子都与自己的控制分开管理! 感谢

Answer 1

你们可以这样做,它为我工作:

<><><><>>><>>>>><>>>>>>>

<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>          

<div class="carousel_content">
    <ul class="mycarousel">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <div class="controls">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next">Next</a>
    </div>  
</div>

<>SCRIPT/strong>

(function($){
    $( .mycarousel ).jcarousel({
        scroll: 1,
        animation: 1000,
        easing:  easeOutQuart ,
        vertical: true,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemLastOutCallback: {
            onAfterAnimation: disableCustomButtons
        },
        itemLastInCallback: {
            onAfterAnimation: disableCustomButtons
        }
    });

    function mycarousel_initCallback(carousel) {

        var elementPrev = carousel.container.next( .controls ).children( .prev );
        var elementNext = carousel.container.next( .controls ).children( .next );

        elementPrev.bind( click , function() {
            carousel.prev();
            return false;
        });

        elementNext.bind( click , function() {
            carousel.next();
            return false;
        });
    };

    function disableCustomButtons(carousel){

        var elementPrev = carousel.container.next( .controls ).children( .prev );
        var elementNext = carousel.container.next( .controls ).children( .next );

        if (carousel.first == 1) {
            elementPrev.addClass( inactive );
        } else {
            elementPrev.removeClass( inactive );
        }

        if (carousel.last == carousel.size()) {
            elementNext.addClass( inactive );
        } else {
            elementNext.removeClass( inactive );
        }

    };

})(jQuery);

友情链接