Javascript 引导传送带传送带逐个传送元素

我使用带旋转木马的引导来移动菜单的元素

我想看到4个元素并逐一传递。

使用我的代码，我的效果是：。（4个元素同时通过）

我的代码：

JQuery:

<script type="text/javascript">
$('#myCarousel').carousel({
      interval: 10000
});
$('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
    });
</script>

<div class="row">
<div class="carousel slide" id="myCarousel">
 <div class="carousel-inner">

<div class="item active">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 1</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 2</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 3</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 4</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 5</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 6</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">text 7</p>
    </div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

$（'myCarousel'）。carousel({
间隔：10000
});
$（'.carousel.item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
对于（var i=0；iCarousel）来说，这不是一种很好的方法，但是您希望显示下一个和上一个图像

不是我的，但这是你想要的。
我不太确定，但首先我会使用jquery为每个链接分配一个数字，然后传入我想要显示在div中的数字，0-3，然后使用左箭头和右箭头来增加和减少。对不起，我不能给你显示任何示例，我没有时间处理它。