Javascript 图像滑块在第一次单击按钮后卡住

我有一个关于我从头开始创建的图像滑块的问题。我想从头开始创建它，因为我不需要使用外部滑块可以获得的很多额外属性

我有以下设置：

var num_of_images=$（“.image holder”）.length；
可见光图像变量=2；
$（“#向右滑动”）。单击（函数（）{
$（“.hold-1”）.addClass（'first'）；
});
.col滑块{
位置：相对位置；
z指数：13；
边际上限：0px；
宽度：70%；
溢出：隐藏；
高度：174px；
背景颜色：黄色；
}
.图像支架{
宽度：175px；
高度：174px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
利润率：0.15px；
浮动：左；
背景：线性梯度（rgba（0,0,0,5），rgba（0,0,0,5））
}
.图像保持架h2{
字体系列：titilliumweb；
文本转换：大写；
字号：600；
显示：内联块；
宽度：85%；
文本对齐：居中；
字体大小：36px；
}
.col滑块按钮a{
右边距：10px；
显示：内联块；
边缘底部：30px；
}
.首先{
-webkit动画：animateleft 1s向前放松；
-moz动画：animateleft 1s向前放松；
-ms动画：animateleft 1s向前放松；
-o-animation:animateleft 1s向前放松；
动画：animateleft 1s向前放松；
}
@关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-moz关键帧动画元素{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-webkit关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-ms关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-o关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}

测试1
测试2
测试3
测试4
我添加/更改了以下代码行：

$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');

它的作用：它计算同时具有两个类“
图像保持器”
和
第一个
的元素数量。然后我加1，以获得我们要将类添加到的
hold-
类的值


var num_of_images=$（“.image holder”）.length；
可见光图像变量=2；
$（“#向右滑动”）。单击（函数（）{
$（“.hold-”+（$（'.image holder.first'）.length+1））.addClass（'first'）；
});
.col滑块{
位置：相对位置；
z指数：13；
边际上限：0px；
宽度：70%；
溢出：隐藏；
高度：174px；
背景颜色：黄色；
}
.图像支架{
宽度：175px；
高度：174px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
利润率：0.15px；
浮动：左；
背景：线性梯度（rgba（0,0,0,5），rgba（0,0,0,5））
}
.图像保持架h2{
字体系列：titilliumweb；
文本转换：大写；
字号：600；
显示：内联块；
宽度：85%；
文本对齐：居中；
字体大小：36px；
}
.col滑块按钮a{
右边距：10px；
显示：内联块；
边缘底部：30px；
}
.首先{
-webkit动画：animateleft 1s向前放松；
-moz动画：animateleft 1s向前放松；
-ms动画：animateleft 1s向前放松；
-o-animation:animateleft 1s向前放松；
动画：animateleft 1s向前放松；
}
@关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-moz关键帧动画元素{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-webkit关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-ms关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-o关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}

测试1
测试2
测试3
测试4
您只是将类
第一个添加到您的第一个持有者。。（.hold-1）。您可以添加一个附加变量（计数器），并按以下方式添加：

$(".hold-" + counter +"").addClass('first');

看看下面：


var num_of_images=$（“.image holder”）.length；
可见光图像变量=2；
var计数器=1；
$（“#向右滑动”）。单击（函数（）{
$（.hold-“+counter+”）.addClass（'first'）；
计数器=计数器+1；
});
.col滑块{
位置：相对位置；
z指数：13；
边际上限：0px；
宽度：70%；
溢出：隐藏；
高度：174px；
背景颜色：黄色；
}
.图像支架{
宽度：175px；
高度：174px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
利润率：0.15px；
浮动：左；
背景：线性梯度（rgba（0,0,0,5），rgba（0,0,0,5））
}
.图像保持架h2{
字体系列：titilliumweb；
文本转换：大写；
字号：600；
显示：内联块；
宽度：85%；
文本对齐：居中；
字体大小：36px；
}
.col滑块按钮a{
右边距：10px；
显示：内联块；
边缘底部：30px；
}
.首先{
-webkit动画：animateleft 1s向前放松；
-moz动画：animateleft 1s向前放松；
-ms动画：animateleft 1s向前放松；
-o-animation:animateleft 1s向前放松；
动画：animateleft 1s向前放松；
}
@关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-moz关键帧动画元素{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-webkit关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-ms关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}
@-o关键帧“animateleft”{
0% {
左边距：0px；
}
100% {
左边距：-185px；
}
}

测试1
测试2
测试3
测试4
是的。太棒了，这将帮助我，我已经建立了一个塞子。这样它就会