javascript - 使用 jQuery 的轮播

Question

我知道那里有可用的插件，但我正在尝试自己制作一个，但在此之前，我试图理解将其制作成无限/圆形轮播的概念。这是我的 jsfiddle so far.. http://jsfiddle.net/hbk35/KPKyz/3/

HTML:

    <div id="carousel_wrapper">
    <ul>
        <li>
            <div>0</div>
        </li>
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
    </ul>
</div>
<br>
<div id="buttons">
    <button id="left">left</button>
    <button id="right">right</button>
</div>

JS:

var container = $("#carousel_wrapper");

var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;

runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);

$('#right').on('click',function(){
   runner.animate({scrollLeft: -liWidth},1000);
});


$('#left').on('click',function(){
    runner.animate({scrollLeft: liWidth},1000);
});

CSS:

div#carousel_wrapper{

    overflow:hidden;
    position:relative;
}

ul {
    padding:0px;
    margin:0px;
}
ul li {
    list-style:none;
    float:left;
}
ul li div {
    border:1px solid white;
    width:50px;
    height:50px;
    background-color:gray;
}

我不想使用克隆和分离方法。还有其他方法吗？请任何人愿意指导我在哪里犯错。我也是 stack overflow 和 javascript/jquery 的新手..试图自己学习。请原谅我，因为我一直在尝试将我的代码放在问题上，所以无法像其他人一样整洁和分开。

谢谢!!

Answer 1

给你一个无限。肯定可以用更少的代码来完成。 http://jsfiddle.net/artuc/rGLsG/3/

HTML:

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

CSS:

.carousel{
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }.carousel ul{
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }.carousel ul li{
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }

JS:

$(function(){
        var carousel = $('.carousel ul');
        var carouselChild = carousel.find('li');
        var clickCount = 0;
        var canClick = true;

        itemWidth = carousel.find('li:first').width()+1; //Including margin

        //Set Carousel width so it won't wrap
        carousel.width(itemWidth*carouselChild.length);

        //Place the child elements to their original locations.
        refreshChildPosition();

        //Set the event handlers for buttons.
        $('.btnNext').click(function(){
            if(canClick){
                canClick = false;
                clickCount++;

                //Animate the slider to left as item width 
                carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },300, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                    canClick = true;
                });
            }
        });

        $('.btnPrevious').click(function(){
            if(canClick){
                canClick = false;
                clickCount--;
                //Find the first item and append it as the last item.
                lastItem = carousel.find('li:last');
                lastItem.remove().prependTo(carousel);

                lastItem.css('left', itemWidth*clickCount);             
                //Animate the slider to right as item width 
                carousel.finish(true).animate({
                    left: '+='+itemWidth
                },300, function(){
                    canClick = true;
                });
            }
        });

        function refreshChildPosition(){
            carouselChild.each(function(){
                $(this).css('left', itemWidth*carouselChild.index($(this)));
            });
        }
    });