Javascript 滑块在单击“下一步/上一步”时跳过一张幻灯片

我有两个挑战，建立自己的旋转木马

1当您单击“下一步”或“上一步”按钮（在我的示例中是黑框）时，它会跳过一张幻灯片。 请检查这把小提琴：

简单地说，当您只单击“下一步”或“上一步”时，效果很好，但当您改变主意并单击另一个时，问题就出现了

一般来说，我想我知道原因是什么。我将类“out”添加到下一个滑块以启动动画

$('.nxt').addClass('out');

和“in”-将动画反转到上一个滑块

$('.prv').addClass('in');

“in”和“out”都保留在当前滑块中，这将破坏translateX值

2第二个问题是我通过更改nxt、prv和current类来更改滑块（我的js技能有限） 问题是旋转木马中的幻灯片不能超过3张。有没有一种简单的方法可以自动分配current、prv和nxt类？

---

Thx提前。

我已经更新了jQuery，创建了一个函数来查找下一张和上一张幻灯片，并添加了一些setTimeout（）。这将允许您拥有所需数量的幻灯片

我还将滑块按钮移到了滑块的外部，因为函数会查找其中的元素。main slider

var区间=未定义；
$（文档）.ready（函数（）{
interval=setInterval（getNext，1000）；//毫秒
$（'.next'）。在（'click'，getNext'）上；
$（'.previous'）。在（'click'，getPrev'）；
});
//获取下一张幻灯片
函数getNext（）{
var$curr=$（'.main slider.slide.current'），
$next=（$curr.next（）.length）？$curr.next（）：$（'.main slider.slide'）.first（）；
转换输出（$curr，$next）；
}
//上一个
函数getPrev（）{
var$curr=$（'.main slider.slide.current'），
$next=（$curr.prev（）.length）？$curr.prev（）：$（'.main slider.slide'）.last（）；
transitionIn（$curr，$next）；
}
//滑入
函数transitionIn（$curr，$next）{
间隔时间；
$curr.css（'z-index'，0）.removeClass（'current'）；
$next.show（）.css（'z-index'，1）.addClass（'in'）.addClass（'current'）；
$next.children（）.addClass（'in'）；
setTimeout（函数（）{
$curr.hide（）；
$next.removeClass（'in'）；
$next.children（）.removeClass（'in'）；
},1000)
}
//滑出
函数转换输出（$curr，$next）{
间隔时间；
$curr.css（'z-index'，1.）.addClass（'out'）.removeClass（'current'）；
$next.show（）.css（'z-index'，0）.addClass（'current'）；
$curr.children（）.addClass（'out'）；
setTimeout（函数（）{
$curr.hide（）；
$curr.removeClass（'out'）；
$curr.children（）.removeClass（'out'）；
},1000)
}

body，html{
保证金：0；
身高：100%；
}
/*滑块*/
.主滑块{
身高：100%；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
}
.主滑块.盖{
对象匹配：覆盖；
宽度：100%！重要；
身高：100%；
左：0；
}
.主滑块img{
顶部：-9999px；
底部：-9999px；
右：0；
保证金：自动；
位置：绝对！重要；
显示：块；
浮动：左；
文本对齐：左对齐；
溢出x：隐藏；
}
.幻灯片{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
溢出：隐藏；
显示：无；
}
.裁剪图像{
身高：100%；
保证金：0；
}
.滑入{
z指数：3；
转化：translateX（-0%）；
-webkit动画持续时间：1000ms；
动画持续时间：1000ms；
动画名称：滑入；
-webkit动画方向：交替反转；
-webkit动画计时功能：立方贝塞尔（.82,0,19,1）；/*Safari 4.0-8.0*/
动画计时功能：立方贝塞尔（.82,0,19,1）；
}
.裁剪过的图像{
转化：translateX（0%）；
-webkit动画持续时间：1000ms；
动画持续时间：1000ms；
-webkit动画名称：slide-in-b；
动画名称：slide-in-b；
-webkit动画方向：交替反转；
-webkit动画计时功能：立方贝塞尔（.82,0,19,1）；/*Safari 4.0-8.0*/
动画计时功能：立方贝塞尔（.82,0,19,1）；
}
.滑出{
转化：translateX（-0%）；
-webkit动画持续时间：1000ms；
动画持续时间：1000ms；
动画名称：滑入；
-webkit动画方向：交替；
-webkit动画填充模式：正向；
-webkit动画计时功能：立方贝塞尔（.82,0,19,1）；/*Safari 4.0-8.0*/
动画计时功能：立方贝塞尔（.82,0,19,1）；
}
.裁剪出的图像{
转化：translateX（0%）；
-webkit动画持续时间：1000ms；
动画持续时间：1000ms；
-webkit动画名称：slide-in-b；
动画名称：slide-in-b；
-webkit动画方向：交替；
-webkit动画填充模式：正向；
-webkit动画计时功能：立方贝塞尔（.82,0,19,1）；/*Safari 4.0-8.0*/
动画计时功能：立方贝塞尔（.82,0,19,1）；
}
@关键帧滑入{
0%{transform:translateX（-0%）；}
100%{transform:translateX（-100%）；}
}
@关键帧滑入b{
0%{transform:translateX（0%）；}
100%{transform:translateX（100%）；}
}
.下一个{
位置：绝对位置；
高度：80px；
背景：#141212；
宽度：80px；
右：0；
底部：50%；
z指数：9；
}
.以前的{
位置：绝对位置；
高度：80px；
背景：#141212；
宽度：80px；
左：0；
底部：50%；
z指数：9；
}
/*滑块末端*/

我甚至很乐意在主幻灯片中检测到下一个和上一个div，我刚刚更新了小提琴，因为您的过渡有点不同-非常感谢您在这方面的工作。是的，我想实现一个类似的过渡（动画）：在你的小提琴中有一个阶段，当所有三个图像都显示出来时：没有，这是实际的结果，但下一个滑块的动画是不同的

$('.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');