1

シンプルな jQuery 循環 (無限) カルーセルを作成しました。スクリプトにページネーションを追加して、サイクル内のどのスライドがどのスライドであるかを示すインジケータが必要です。私のjQueryコードは以下の通りです：

jQuery.fn.carousel = function(previous, next, options){
var sliderList = jQuery(this).children()[0];

if (sliderList) {
    var increment = jQuery(sliderList).children().outerWidth("true"),
    elmnts = jQuery(sliderList).children(),
    numElmts = elmnts.length,
    sizeFirstElmnt = increment,
    shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
    firstElementOnViewPort = 1,
    isAnimating = false;

    for (i = 0; i < shownInViewport; i++) {
        jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
        jQuery(sliderList).append(jQuery(elmnts[i]).clone());
    }

    jQuery(previous).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort == 1) {
                jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                firstElementOnViewPort = numElmts;
            }
            else {
                firstElementOnViewPort--;
            }

            jQuery(sliderList).animate({
                left: "+=" + increment,
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }

    });

    jQuery(next).click(function(event){
        if (!isAnimating) {
            if (firstElementOnViewPort > numElmts) {
                firstElementOnViewPort = 2;
                jQuery(sliderList).css('left', "0px");
            }
            else {
                firstElementOnViewPort++;
            }
            jQuery(sliderList).animate({
                left: "-=" + increment,
                y: 0,
                queue: true
            }, "swing", function(){isAnimating = false;});
            isAnimating = true;
        }
    });
}
};

HTML マークアップは次のとおりです。

<div id="viewport">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div> <!-- END VIEWPORT-->

<div class="buttons">
     <a id="prev"><i class="icon-chevron-left"></i></a>
     <a id="next"><i class="icon-chevron-right"></i></a>
</div>

ページネーションシステムをどのように実装するかを理解するのに苦労しています。どんなヘップやガイダンスも素晴らしいでしょう。ここで私のコードの動作を確認できます: http://www.samskirrow.com/projects/carousel

4

1 に答える 1

1

これはあなたが達成したいことの非常に基本的な考え方ですが、これを回避する方法は、カルーセルにある各アイテムが要素を別のメニューに追加し、それぞれを関連する要素にリンクすることですスライダー。たとえば、この非常に基本的なフィドルを参照してください。

要素を追加するには

count = 0;
$('#cara .item').each(function () {
    count++;
    li = '<li id="' + count + '"> Page ' + count + '</li>';
    $('.page ul').append(li);
});

そして、各要素をクリックすると、カルーセル内のアイテムがアニメーション化されます。

$('.page ul li').on('click', function () {
    id = $(this).attr('id');
    $('.item').animate({opacity:0});
    $('.item:nth-of-type('+id+')').animate({
        opacity: 1
    });
});

私が言ったように、これはあなたが達成しようとしていることの単純なバージョンですが、あなたを助けるかもしれないアイデアです.

于 2013-03-29T10:33:40.910 に答える