我有两个挑战建立我自己的旋转木马。
请检查这个小提琴：https://fiddle.jshell.net/k1ea93xt/3/
简单地说，当你单击next或prev时，它运行良好，但当你改变主意并击中另一个时，就会出现问题。
一般来说，我想我知道原因是什么。我添加课程＆＃34; out＆＃34;到下一个滑块以启动动画
$('.nxt').addClass('out');
和＆＃34; in＆＃34; - 将动画反转到上一个滑块
$('.prv').addClass('in');
两者＆＃34; in＆＃34;和＆＃34; out＆＃34;保留在当前滑块中，该滑块会破坏translateX值。
$('.nxt').addClass('out');
$('.current').removeClass('out');
$('.prv').removeClass('out');
$('.t1').removeClass('current');
$('.t2').removeClass('nxt');
$('.t3').removeClass('prv');
$('.t1').addClass('prv');
$('.t2').addClass('current');
$('.t3').addClass('nxt');
$('.current').removeClass('t2');
$('.prv').removeClass('t1');
$('.nxt').removeClass('t3');
$('.current').addClass('t1');
$('.nxt').addClass('t2');
$('.prv').addClass('t3');
$('.t1').removeClass('in');
$('.t2').removeClass('in');
$('.t3').removeClass('in');
问题是我在旋转木马上不能有超过3张幻灯片。有没有一种简单的方法可以自动分配类current，prv和nxt？ Thx提前。
答案 0 :(得分：1)
我更新了你的jQuery并创建了一个函数来查找下一张和上一张幻灯片，并添加了一些setTimeout（）。这将允许您拥有任意数量的幻灯片。
我还将滑块按钮移动到滑块外部，因为函数会查找.main-slider
中的元素
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 1000); // milliseconds
$('.next').on('click', getNext);
$('.previous').on('click', getPrev);
});
//Get next slide
function getNext() {
var $curr = $('.main-slider .slide.current'),
$next = ($curr.next().length) ? $curr.next() : $('.main-slider .slide').first();
transitionOut($curr, $next);
}
// get previous
function getPrev() {
var $curr = $('.main-slider .slide.current'),
$next = ($curr.prev().length) ? $curr.prev() : $('.main-slider .slide').last();
transitionIn($curr, $next);
}
//slide in
function transitionIn($curr, $next) {
clearInterval(interval);
$curr.css('z-index', 0).removeClass('current');
$next.show().css('z-index', 1).addClass('in').addClass('current');
$next.children().addClass('in');
setTimeout(function(){
$curr.hide();
$next.removeClass('in');
$next.children().removeClass('in');
},1000)
}
//slide out
function transitionOut($curr, $next) {
clearInterval(interval);
$curr.css('z-index', 1).addClass('out').removeClass('current');
$next.show().css('z-index', 0).addClass('current');
$curr.children().addClass('out');
setTimeout(function(){
$curr.hide();
$curr.removeClass('out');
$curr.children().removeClass('out');
},1000)
}body, html {
margin:0;
height:100%;
}
/*slider*/
.main-slider {
height: 100%;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.main-slider .cover {
object-fit: cover;
width: 100% !important;
height: 100%;
left: 0;
}
.main-slider img {
top: -9999px;
bottom: -9999px;
right: 0;
margin: auto;
position: absolute !important;
display: block;
float: left;
text-align: left;
overflow-x: hidden;
}
.slide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: hidden;
display: none;
}
.cropped-image{
height: 100%;
margin: 0;
}
.slide.in {
z-index: 3;
transform: translateX(-0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: slide-in;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.cropped-image.in {
transform: translateX(0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-name: slide-in-b;
animation-name: slide-in-b;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.slide.out {
transform: translateX(-0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: slide-in;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
.cropped-image.out {
transform: translateX(0%);
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-name: slide-in-b;
animation-name: slide-in-b;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(.82,0,.19,1); /* Safari 4.0 - 8.0 */
animation-timing-function: cubic-bezier(.82,0,.19,1);
}
@keyframes slide-in {
0% {transform: translateX(-0%);}
100% {transform: translateX(-100%);}
}
@keyframes slide-in-b {
0% {transform: translateX(0%);}
100% {transform: translateX(100%);}
}
.next {
position: absolute;
height: 80px;
background: #141212;
width: 80px;
right: 0;
bottom: 50%;
z-index: 9;
}
.previous {
position: absolute;
height: 80px;
background: #141212;
width: 80px;
left: 0;
bottom: 50%;
z-index: 9;
}
/* end of slider*/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="next"></div>
<div class="previous"></div>
<div class="main-slider">
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1508108712903-49b7ef9b1df8?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1507980668227-a52aa457699b?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
<div class="slide">
<figure class="cropped-image">
<img src="https://images.unsplash.com/photo-1497030855747-0fc424f89a4b?auto=format&fit=crop&w=2250&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" class="cover">
</figure>
</div>
</div>
希望这有帮助