Javascript 使用jQuery的旋转木马

我知道有很多插件可用，但我正在尝试自己制作一个插件，但在此之前，我试图理解将其制作为无限/循环旋转木马的概念。这是我的

HTML:

CSS:

我不想使用克隆和分离方法。还有别的办法吗？ 请任何人都能告诉我哪里出了错。我是堆栈溢出和javascript/jquery的新手。我试着自己学习。原谅我，我试图把我的代码放到这个问题上，不能像其他人一样整洁和独立

谢谢

给你：

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

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

CSS

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

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

---

给你一个无限的。当然可以用更少的代码来完成。

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>

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

$(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)));
            });
        }
    });

JS:

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

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

$(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)));
            });
        }
    });

---

我们需要一个

重新设计轮子

标签，以便小提琴中的代码与您问题中的代码不匹配。@j08691抱歉。小提琴被更新了。谢谢。您是否希望从jquery框架或任何其他框架实现旋转木马framework@Someone使用jQuery框架。事实上，我正试图利用它。为了让它循环/无限。谢谢，我在找没有额外插件的东西。我以为你是OP:P…我的bad@Ani太棒了。还有两个问题。如果我不知道宽度，为什么我不能使用liWidth？我怎样才能使它成为圆形/无限？？谢谢。哦……我不知道你想要圆形……等一下，当你快速点击时，有一个虫子。将finish（）方法添加到JS fiddle中：效果非常好！太棒了这就是我要找的。。。谢谢但是有一个小问题。。如果你一直按“下一步”按钮，你会发现1到2个li元素之间有一个空格。是的，如果你快速点击，动画和完成都不起作用。我实现了一个肮脏的解决方案。请看更新的提琴：还删除了一个无用的功能。是的，我看到了你更新的提琴的问题。如果你连续快速点击左键，你会看到第一个元素不在那里+中间有一些随机空间。否则上一个按钮的效果太棒了！！谢谢你！我想如果我们能解决随机空间的问题！