Skip to main content
replaced http://es.stackoverflow.com/ with https://es.stackoverflow.com/
Origen Enlace

Como sugiere Mitsu Gami en su comentarioMitsu Gami en su comentario, podrías usar requestAnimationFrame en lugar de setInterval. Lo cual funcionaría mejor, aunque debes tener cuidado porque puede no funcionar en algunos navegadores, especialmente no sería compatible con versiones antiguas de Android o IE (9 e inferiores).

En ese caso, el código se vería así:

var start = null;
var testinterval = null;

function animTestimonials(timestamp) {
  if (!start)  start = timestamp;
  var progress = timestamp - start;
  if (progress > 2500) {
    start = timestamp;
    $('#nxt-testimonial').click();
  }
  testinterval = window.requestAnimationFrame(animTestimonials);
}

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  testinterval = window.requestAnimationFrame(animTestimonials);
  $txtcarousel.on("mouseenter", function() {
    window.cancelAnimationFrame(testinterval);
  }).on("mouseleave", function() {
    testinterval = window.requestAnimationFrame(animTestimonials);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Como sugiere Mitsu Gami en su comentario, podrías usar requestAnimationFrame en lugar de setInterval. Lo cual funcionaría mejor, aunque debes tener cuidado porque puede no funcionar en algunos navegadores, especialmente no sería compatible con versiones antiguas de Android o IE (9 e inferiores).

En ese caso, el código se vería así:

var start = null;
var testinterval = null;

function animTestimonials(timestamp) {
  if (!start)  start = timestamp;
  var progress = timestamp - start;
  if (progress > 2500) {
    start = timestamp;
    $('#nxt-testimonial').click();
  }
  testinterval = window.requestAnimationFrame(animTestimonials);
}

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  testinterval = window.requestAnimationFrame(animTestimonials);
  $txtcarousel.on("mouseenter", function() {
    window.cancelAnimationFrame(testinterval);
  }).on("mouseleave", function() {
    testinterval = window.requestAnimationFrame(animTestimonials);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Como sugiere Mitsu Gami en su comentario, podrías usar requestAnimationFrame en lugar de setInterval. Lo cual funcionaría mejor, aunque debes tener cuidado porque puede no funcionar en algunos navegadores, especialmente no sería compatible con versiones antiguas de Android o IE (9 e inferiores).

En ese caso, el código se vería así:

var start = null;
var testinterval = null;

function animTestimonials(timestamp) {
  if (!start)  start = timestamp;
  var progress = timestamp - start;
  if (progress > 2500) {
    start = timestamp;
    $('#nxt-testimonial').click();
  }
  testinterval = window.requestAnimationFrame(animTestimonials);
}

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  testinterval = window.requestAnimationFrame(animTestimonials);
  $txtcarousel.on("mouseenter", function() {
    window.cancelAnimationFrame(testinterval);
  }).on("mouseleave", function() {
    testinterval = window.requestAnimationFrame(animTestimonials);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Recompensa finalizada con 100 de reputación otorgada por May
se añadieron 6155 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190


Sobre lo de arrastrar los elementos en el scroll, el método de la página enlazada es mucho mejor. He creado una animación simple que se basa en la posición del ratón cuando se pulsa y se suelta teniendo en cuenta que el ancho de cada elemento es 140.

Lo puedes ver aquí:

var direccion  = "up";
var pasoActual = 0;
var scrollUsuario = false;
var scroll0 = -1;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  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) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
  
  $clientcarousel.on("mousedown", function(e) {
    scrollUsuario = true;
    scroll0 = e.pageX;
    event.preventDefault();
  }).on("mouseup", function(e) {
    scrollUsuario = false;
    var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
    var dir = scroll0 - e.pageX < 0 ? "up" : "down";
    for (var x = 0; x < num; x++) {
        var $first = $('#clients-list li:first');
        var $last  = $('#clients-list li:last');
      if (dir == "up") {
        $last.prependTo("#clients-list");
      } else {
        $first.appendTo("#clients-list");
      }
    }
    $("#clients-list").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
    if (scrollUsuario) {
      $("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")
    }
  });
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -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;
}


#clients, #clients * {
  user-select:none;
  -webkit-user-select:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->


Sobre lo de arrastrar los elementos en el scroll, el método de la página enlazada es mucho mejor. He creado una animación simple que se basa en la posición del ratón cuando se pulsa y se suelta teniendo en cuenta que el ancho de cada elemento es 140.

Lo puedes ver aquí:

var direccion  = "up";
var pasoActual = 0;
var scrollUsuario = false;
var scroll0 = -1;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  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) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
  
  $clientcarousel.on("mousedown", function(e) {
    scrollUsuario = true;
    scroll0 = e.pageX;
    event.preventDefault();
  }).on("mouseup", function(e) {
    scrollUsuario = false;
    var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
    var dir = scroll0 - e.pageX < 0 ? "up" : "down";
    for (var x = 0; x < num; x++) {
        var $first = $('#clients-list li:first');
        var $last  = $('#clients-list li:last');
      if (dir == "up") {
        $last.prependTo("#clients-list");
      } else {
        $first.appendTo("#clients-list");
      }
    }
    $("#clients-list").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
    if (scrollUsuario) {
      $("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")
    }
  });
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -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;
}


#clients, #clients * {
  user-select:none;
  -webkit-user-select:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->
se añadieron 5538 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190


Ahora que ya tienes el código para mover las imágenes hacia la derecha y hacia la izquierda, lo que podrías hacer es:

  1. Contar el número de elementos
  2. Inicializar una variable a 0
  3. Realizar la función que mueve los elementos hacia la izquierda
  4. Incrementar en 1 la variable iniciada en el paso 2
  5. Si la variable es menor que el número de elementos (aún no se recorrieron todas las imágenes), ir al paso 3
  6. Realizar la función que mueve los elementos hacia la derecha
  7. Disminuir en 1 la variable iniciada en el paso 2
  8. Si la variable es mayor que 0 (aún no se recorrieron todas las imágenes), ir al paso 6
  9. Ir al paso 3 (para empezar todo de nuevo)

El código podría ser algo así:

var direccion  = "up";
var pasoActual = 0;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  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) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -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/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->


Ahora que ya tienes el código para mover las imágenes hacia la derecha y hacia la izquierda, lo que podrías hacer es:

  1. Contar el número de elementos
  2. Inicializar una variable a 0
  3. Realizar la función que mueve los elementos hacia la izquierda
  4. Incrementar en 1 la variable iniciada en el paso 2
  5. Si la variable es menor que el número de elementos (aún no se recorrieron todas las imágenes), ir al paso 3
  6. Realizar la función que mueve los elementos hacia la derecha
  7. Disminuir en 1 la variable iniciada en el paso 2
  8. Si la variable es mayor que 0 (aún no se recorrieron todas las imágenes), ir al paso 6
  9. Ir al paso 3 (para empezar todo de nuevo)

El código podría ser algo así:

var direccion  = "up";
var pasoActual = 0;

$(function(){

  // vars for clients list carousel 
  var $clientcarousel = $('#clients-list');
  var clients = $clientcarousel.children().length;
  var clientwidth = (clients * 140); // 140px width for each client item 
  $clientcarousel.css('width',clientwidth);

  var rotating = true;
  var clientspeed = 1800;
  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) {
      if (direccion == "up") {
        rotateClientsUp();
        if (++pasoActual == $("#clients-list li").length) direccion = "down";
      } else {
        rotateClientsDown();
        if (--pasoActual == 0)  direccion = "up";
      }

    }
  }

  function rotateClientsUp() {
    var $last   = $('#clients-list li:last');
    $last.remove().css("margin-left", "-140px");
    $("#clients-list").prepend($last);
    $last.animate({ 'margin-left': '0' }, 600);
  }

  function rotateClientsDown() {
    var $first = $('#clients-list li:first');
    $first.animate({ 'margin-left': '-140px' }, 600, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#clients-list li:last').after($first);
    });
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 140px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -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/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix">
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
          <li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div><!-- @end .clients-wrap -->
    </div><!-- @end #clients -->
  </div><!-- @end #content -->
</div><!-- @end #w -->
Borré el ejemplo de requestAnimationFrame por error. Lo vuelvo a poner
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
Loading
Añadir sugerencia de @MitsuGami en el ejemplo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
Loading
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
Loading