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

This is a very basic idea of what you're hoping to achieve, but the way I would go around this is for each item that is in your carousel to append an element to another menu, and then link each one to the relevant element in the slider. For example please see this VERY basic fiddle.

To add the elements

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

And for each element on click animate to the item in your carousel.

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

As I said this is a simple version of what you're trying to achieve but is an idea that might help you.

于 2013-03-29T10:33:40.910 回答