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;
}

我不想使用克隆和分离方法。还有其他办法吗？请有人在我错误的地方指导我。我是新手堆栈溢出和javascript / jquery也..我自己学习。原谅我，我正在努力将我的代码放到问题上，不能像其他人那样整洁和分离。

谢谢！

Answer 1

在这里：http://jsfiddle.net/KPKyz/5/

<强> 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').click(function() {
    $( runner  ).animate({ "left": "-=51px" }, "slow" );
});


$('#left').click(function() {
    $( runner  ).animate({ "left": "+=51px" }, "slow" );
});

<强> CSS

div#carousel_wrapper{

 overflow:hidden;
 position:relative;
 width:500px;
 height: 100px;
}

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

Answer 2

在这里你无限。可以用更少的代码来完成。 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)));
            });
        }
    });

使用jQuery的轮播

2 个答案: