Javascript jquery动画幻灯片放映未设置动画

我有下面的图像滑块代码。这有点复杂，因为我想对页面上的多个滑块元素使用滑块代码。请参见下面一个滑块的代码：
下面描述了我遇到的问题

$（文档）.ready（函数（）{
$（'.vertical\u img'）.first（）.addClass（'display currentvertical\u img'）.removeClass（'invisible'）；
$（'.horizontal_img'）.first（）.addClass（'display currenthorizontal_img'）.removeClass（'invisible'）；
$（'.diagonal_img'）.first（）.addClass（'display currentdiagonal_img'）.removeClass（'invisible'）；
//图像滑块与用户的交互
$（'.right'）。单击（函数（）{
接下来（$（this.data（'id'））；
});
$（'.left'）。单击（函数（）{
以前的（$（this.data（'id'））；
});
});
下一个函数（img_类）{
var计数；
$（'.current'+img_类）.animate（{left:0}，500，function（）{
console.log（“动画？”）；
$（'.current'+img_类）.removeClass（'display current'+img_类）.addClass（'invisible previous'+img_类）；
if（$（'.previous'+img_class）.is（':last child'））{
count=$（'..+img_class）.first（）.data（'num'）；
$（'..+img_类）.first（）.removeClass（'invisible'）.addClass（'display current'+img_类）；
}
否则{
$（'.previous'+img_类）.next（）.addClass（'display current'+img_类）.removeClass（'invisible'）；
count=$（'.previous'+img_类）.next（）.data（'num'）；
}
$（'.'.+img_类+''u滑块'）。文本（计数+'/4'）；
$（'.previous'+img_类）.removeClass（'previous'+img_类）；
});
}
上一个功能（img_类）{
var计数；
$（'.current'+img_类）.removeClass（'display current'+img_类）.addClass（'invisible previous'+img_类）.animate（{right:0}）；
if（$（'.previous'+img_class）.is（':first child'））{
count=$（'..+img_class）.last（）.data（'num'）；
$（'..+img_类）.last（）.removeClass（'invisible'）.addClass（'display current'+img_类）；
}
否则{
$（'.previous'+img_class）.prev（）.addClass（'display current'+img_class.）.removeClass（'invisible'）；
count=$（'.previous'+img_class）.prev（）.data（'num'）；
}
$（'.'.+img_类+''u滑块'）。文本（计数+'/4'）；
$（'.previous'+img_类）.removeClass（'previous'+img_类）；
}

.main\u image\u slide\u容器{
位置：固定；
左：50px；
右：50px；
宽度：500px；
高度：500px；
}
.图像\u幻灯片\u容器\u全部\u文本\u包装{
宽度：100%；
高度：自动；
溢出：覆盖；
}
.图像\u滑块\u标题{
浮动：左；
}
.图像\u滑块\u计数器{
浮动：对；
}
.main_image_slide_容器。image_slide_计数器{
显示：无；
}
.image\u slide\u container\u all\u text\u wrapper.image\u slider\u counter{
显示：块；
}
.滑块\图像\包装器\窗口{
宽度：100%；
高度：自动；
位置：相对位置；
}
.图像\u滑块\u控件{
位置：绝对位置；
z指数：10；
宽度：50%；
身高：100%；
}
.左{
左：0；
游标：默认值；
}
.左：悬停{
游标：url（../../data/cursor_left.png）40 30，移动；
}
.对{
右：0；
游标：默认值；
}
.右：悬停{
游标：url（../../data/cursor_right.png）40 30，移动；
}
.slider\u图像\u容器{
宽度：100%；
高度：自动；
}
.滑块\u图像\u容器图像{
位置：相对位置；
宽度：100%；
}

严重垂直
1/4
1/4 

您错过了

不可见css

。下面是一个工作示例

---

您正在更改静态元素的左/顶属性您的确切意思是什么？这是错误的吗？我应该让它充满活力吗？我如何使其动态？它们应该被定位，使用绝对/相对或固定位置。。。默认情况下，元素有一个静态位置，因此您可以使用left/top/right/bottom移动它。我尝试使用相对位置，但它不起作用。我将更新问题，以便您可以看到它。只是为了确保图像的位置相对正确？这就是我现在在代码中所做的，请看问题。