javascript - 连续 Logo 轮播

Question

我正在尝试让这个 Logo 轮播自动连续运行。现在它仍在每个 Logo 处暂停，然后再转到下一个。

$(function() {
  // vars for clients list carousel
  // http://stackoverflow.com/questions/6759494/jquery-function-definition-in-a-carousel-script
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 220); // 140px width for each client item 
  $clientcarousel.css('width', clientwidth);

  var rotating = true;
  var clientspeed = 0;
  var seeclients = setInterval(rotateClients, clientspeed);

  $(document).on({
    mouseenter: function() {
      rotating = false; // turn off rotation when hovering
    },
    mouseleave: function() {
      rotating = true;
    }
  }, '#clients');

  function rotateClients() {
    if (rotating != false) {
      var $first = $('#clients-list li:first');
      $first.animate({
        'margin-left': '-220px'
      }, 2000, function() {
        $first.remove().css({
          'margin-left': '0px'
        });
        $('#clients-list li:last').after($first);
      });
    }
  }
});

/*Logo carousel*/

#clients {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap {
  display: block;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clients">
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">
      <li>
        <img src="images/logos/BlaceAce-grayscale.png" alt="Black Ace">
      </li>
      <li>
        <img src="images/logos/WBPN-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/CA-grayscale.png" alt="Custom Aire">
      </li>
      <li>
        <img src="images/logos/GVAH-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/DM-grayscale.png" alt="Dakota Molding">
      </li>
      <li>
        <img src="images/logos/DP-grayscale.png" alt="Dakota Peat">
      </li>
      <li>
        <img src="images/logos/IH-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/EBC-grayscale.png" alt="Eastbay Campground">
      </li>
      <li>
        <img src="images/logos/NDTC-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Nutrena-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/NWB-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/RHS-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Sertoma-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/FSB-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/TM-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/TP-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/UC-TMC-grayscale.png" alt="First State Bank">
      </li>
      <li>
        <img src="images/logos/Vilandre-grayscale.png" alt="First State Bank">
      </li>
    </ul>
  </div>
  <!-- @end .clients-wrap -->
</div>
<!-- @end #clients -->

JSFIDDLE:

http://jsfiddle.net/yetanrj6/

Answer 1

您需要将 "linear" 缓动添加到 .animate()

第 25 行:

  $first.animate({ 'margin-left': '-220px' }, 2000, "linear", function() {

jsfiddle demo