Javascript 为什么光滑的滑块在循环的第二次迭代中刷新滑块项的css

我使用光滑的滑块作为图像装饰

我在一个子项中添加了一个顶级css，如下所示。顶部位置css在第一次加载时工作良好，当循环的第二次迭代开始时，顶部位置css将被删除，并在第二次加载时再次添加，从而产生跳跃效果。这个问题被重新创建并显示在下面给出的小提琴中。有没有办法解决幻灯片的跳跃问题

这个问题在这里重现

$（函数（）{
$（'.my pics'）。光滑({
无限：是的，
箭头：是的，
点：错，
自动播放：错误，
幻灯片放映：5，
幻灯片滚动：5，
});
});
。我的照片{
填充：18%4%；
}
.我的照片.光滑的列表{
溢出：可见；
}
.我的照片.光滑的列表.光滑的幻灯片{
位置：相对位置；
变换：旋转（45度）；
溢出：隐藏；
}
.我的照片.光滑的列表.光滑的幻灯片a{
显示：块；
变换：旋转（-45度）；
}
.我的照片.光滑的列表.光滑的幻灯片{
显示：块；
转换：比例（1.5）；
}
.我的照片.光滑的列表.光滑的幻灯片：第n个孩子（7）{
顶部：-90px；
}
img{
最大宽度：100%；
}




























$（函数（）{
$（'.my pics'）。光滑({
无限：是的，
箭头：是的，
点：错，
自动播放：错误，
幻灯片放映：5，
幻灯片滚动：5，
});
});
。我的照片{
填充：18%4%；
}
.我的照片.光滑的列表{
溢出：可见；
}
.我的照片.光滑的列表.光滑的幻灯片{
位置：相对位置；
变换：旋转（45度）；
溢出：隐藏；
}
.我的照片.光滑的列表.光滑的幻灯片a{
显示：块；
变换：旋转（-45度）；
}
.我的照片.光滑的列表.光滑的幻灯片{
显示：块；
转换：比例（1.5）；
}
//我在你的代码中删除了这一行，效果很好
/*.我的照片.光滑的列表.光滑的幻灯片：第n个孩子（7）{
顶部：-90px；
}*/
img{
最大宽度：100%；
}



























我认为如果你在做一个无限循环，一旦项目结束，它就会被附加到开始，因此不再是第七个子项。你最好在那张幻灯片上放一个类，而不是样式。我怎样才能把类添加到那个特定的项目中？把它放在li上？：-谢谢你的回答。根据您的建议，当我删除“顶部：-90px”CSS时，所有图像都将对齐。但我需要的是使图像始终显示在顶部，循环时不会跳出。希望你明白我的意思。