Como sugiere Mitsu Gami en su comentarioMitsu Gami en su comentario, podrías usar
requestAnimationFrame
en lugar desetInterval
. 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 desetInterval
. 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 desetInterval
. 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 -->
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 & 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 & 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:
- Contar el número de elementos
- Inicializar una variable a 0
- Realizar la función que mueve los elementos hacia la izquierda
- Incrementar en 1 la variable iniciada en el paso 2
- Si la variable es menor que el número de elementos (aún no se recorrieron todas las imágenes), ir al paso 3
- Realizar la función que mueve los elementos hacia la derecha
- Disminuir en 1 la variable iniciada en el paso 2
- Si la variable es mayor que 0 (aún no se recorrieron todas las imágenes), ir al paso 6
- 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 & 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:
- Contar el número de elementos
- Inicializar una variable a 0
- Realizar la función que mueve los elementos hacia la izquierda
- Incrementar en 1 la variable iniciada en el paso 2
- Si la variable es menor que el número de elementos (aún no se recorrieron todas las imágenes), ir al paso 3
- Realizar la función que mueve los elementos hacia la derecha
- Disminuir en 1 la variable iniciada en el paso 2
- Si la variable es mayor que 0 (aún no se recorrieron todas las imágenes), ir al paso 6
- 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 & 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 -->