一页中的两个旋转木马

Question

我正在尝试将旋转木马放在我的页面中，并且[本页] [1]下面的代码对于页面中的一个旋转木马很有效，但是当我尝试在一个页面中放置两个旋转木马时，它不起作用。

我无法弄清楚我是如何使它工作的，因为我是jQuery的初学者。有谁知道我怎么能让它工作？

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

  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() {
    clickCount++;

    //Animate the slider to left as item width 
    carousel.finish().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));
    });
  });

  $('.btnPrevious').click(function() {
    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().animate({
      left: '+=' + itemWidth
    }, 300);
  });

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

  function refreshChildPositionNext() {
    carouselChild.each(function() {
      leftVal = parseInt($(this).css('left'));
    });
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

http://jsfiddle.net/artuc/rGLsG/3/

Answer 1

问题是因为选择器的工作方式是选择所有.carousel实例，无论有多少。要解决这个问题，您需要遍历每个实例，然后使用DOM遍历来查找特定轮播的相关元素。

将它转换为jQuery扩展也是有意义的，你可以调用包含轮播的元素，如下所示：

$(function() {
  $.fn.carousel = function() {
    $(this).each(function() {
      var $container = $(this);
      var $carousel = $container.find('.carousel ul');
      var $carouselChild = $carousel.find('li');
      var $prev = $container.find('.btnPrevious');
      var $next = $container.find('.btnNext');
      var clickCount = 0;

      itemWidth = $carousel.find('li:first').width() + 1;
      $carousel.width(itemWidth * $carouselChild.length);
      refreshChildPosition();

      $next.click(function() {
        clickCount++;

        $carousel.finish().animate({
          left: '-=' + itemWidth
        }, 300, function() {
          lastItem = $carousel.find('li:first');
          lastItem.remove().appendTo($carousel);
          lastItem.css('left', (($carouselChild.length - 1) * (itemWidth)) + (clickCount * itemWidth));
        });
      });

      $prev.click(function() {
        clickCount--;
        lastItem = $carousel.find('li:last');
        lastItem.remove().prependTo($carousel);
        lastItem.css('left', itemWidth * clickCount);
        $carousel.finish().animate({
          left: '+=' + itemWidth
        }, 300);
      });

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

      function refreshChildPositionNext() {
        $carouselChild.each(function() {
          leftVal = parseInt($(this).css('left'));
        });
      }
    });
  }
  
  $('.carousel-container').carousel();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="carousel-container">
  <a href="#" class="btnPrevious">Previous</a>
  <a href="#" 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>
</div>

<div class="carousel-container">
  <a href="#" class="btnPrevious">Previous</a>
  <a href="#" 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>
</div>