在StackOverflow上，我根据我的问题在其他主题中发现了有关轮播的各种问题。
非常有用的问题作为指导：
现在我的问题是：
如何创建自动左右移动？
我向自己解释，考虑到游戏的开始，让图像向左移动图像等等。
如何在图像或图像内容中创建水平滚动？
换句话说，在尝试选择图像时，能够以这种效果将图像或内容同时向右和向左移动，唯一可以实现的就是移动轮播的内容。
- 示例：此数字媒体网站底部的客户轮播效果。
在客户推荐的轮播中如何使客户推荐中的自动移动。
你能向我解释一下如何应用这些效果吗？
$(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);
});
});
// 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) {
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;
}
/** 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;
}
/** 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="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 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 -->
让我们分部分进行。
首先是推荐的轮播。你想要的是它自动动画，而不需要用户点击按钮。您可以通过一种非常简单的方式做到这一点：由于您已经拥有“上一个”和“下一个”按钮的操作，您可以做的是创建一个间隔，每 X 次单击下一个按钮。
这可以通过
setInterval（创建间隔）和方法click（不带参数）来触发元素的点击事件。它会是这样的：每 2.5 秒触发下一个按钮的单击事件。现在，如果你想让它变得更复杂一些，你可以让它不是自动的，如果这个人将鼠标悬停在推荐上。为此，代码将是这样的：
在这里你可以看到它的工作：
现在图像滚动。正如你现在所做的那样，你的图像滚动所做的是：
Esto funciona bien si quieres hacer un movimiento de derecha a izquierda, pero para hacer algo similar de izquierda a derecha lo que podrías hacer es:
Para ello sólo hace falta cambiar la función
rotateClientsque quedaría así:Aquí puedes ver el código funcionando:
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:
El código podría ser algo así:
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í:
让我们看看，简短...仅取自我在轮播代码之前给您的带有文本和图像的内容：
这是html和javascript
在这个 javascript 文档中，您可以加载要显示的图像的文本和 url，在您的情况下，它将是徽标（我认为）
这次我只给了你两句话，这样你就可以看到数组是如何加载的，然后你将从 javascript 中读取。如果您不希望出现照片或两个文本中的任何一个，您只需删除放置人、短语或照片的位置，这取决于您不想出现的内容，如果您需要 css 告诉我和我''ll put it too，虽然我认为你想要做什么，你必须创造你自己的
问候
Eso se puede realizar con bootstrap, no es necesario reinventar el hilo negro.
Te dejo un ejemplo, pon atención al siguiente div.
En este div se configuran las propiedades de el carrusel, data-interval representa el tiempo en milisegundos, que va a tardar en pasar de una imagen a otra.
Si es de tu gusto realizarlo con javascript solo tendrias que realizar lo siguiente:
Si necesitas configurar mas el carrusel, visita el siguiente link http://getbootstrap.com/javascript/#carousel donde puedes observar todas las propiedades que puedes configurar.