Javascript 使用HTML/CSS/jQuery的多div旋转木马功能

点击添加按钮后如何实现多个div的轮转？对于每个循环，每次单击“添加”按钮都将重复div。单击后，要并排放置多个div，当其溢出时，我们需要为其执行旋转木马功能，箭头标记为next和prev。有没有办法解决这个问题

。小标题{
最小高度：124px；
背景位置：右中；
文本对齐：居中；
显示：表格；
宽度：100%；
填充：22px20px0；
背景：#fff；
框大小：边框框；
}
.小标题。垂直对齐{
显示：表格单元格；
垂直对齐：中间对齐；
}
.组件传送带{
宽度：530px；
显示：块；
保证金：0自动；
位置：相对位置；
边缘底部：40px；
}
.组件传送带：之前{
左：0；
}
.component carousel:之后，.component carousel:之前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
宽度：20%；
身高：100%；
z指数：1；
}
.组件传送带.外部内容{
宽度：100%；
身高：100%；
位置：相对位置；
溢出：隐藏；
}
.组件传送带.项目{
位置：相对位置；
高度：190px；
左：145px；
}
.组件转盘.项目.项目{
排名：0；
左：-50px；
高度：190px；
框大小：边框框；
浮动：左；
利润率：0.20px 0.0；
位置：相对位置；
显示：表格；
}
.你的{
显示：块；
高度：290px；
边框：2px实心#5e6a71；
文本对齐：居中；
字号：600；
字母间距：1px；
填充：15px0；
宽度：244px；
位置：相对位置；
背景：#fff；
}
.组件传送带.项目符号{
位置：绝对位置；
底部：-25px；
宽度：100%；
文本对齐：居中；
z指数：3；
}
.组件传送带.项目符号li{
过渡：所有.15秒放松；
显示：内联块；
利润率：0.3倍；
}
.您的>p.卡号{
边缘顶部：95px；
边缘底部：10px；
位置：相对位置；
颜色：#5e6a71；
}
.你的.信息号码{
显示：块；
}
.您的p.卡号：之后{
内容：“；
显示：块；
宽度：70%；
高度：1px；
背景#bec3c6；
保证金：0自动；
边缘顶部：7px；
}
.剩下的卡：之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：1px；
高度：95px；
背景：#cecfd1；
右图：-15px；
排名：0；
}
.卡详细信息容器{
显示：块；
位置：绝对位置；
宽度：100%；
高度：80px；
左：0；
顶部：180像素；
颜色：#5e6a71；
}
.左卡{
显示：块；
浮动：左；
宽度：50%；
位置：相对位置；
填充：0 18px；
}
.卡片对吗{
显示：块；
浮动：左；
宽度：50%；
位置：相对位置；
填充：0 35px；
}
.卡片详细信息容器p{
线高：14px！重要；
}
.组件-carousel.show-two.控件{
显示：无；
}
.组件传送带.控件{
宽度：100%；
身高：100%；
z指数：2；
位置：绝对位置；
排名：0；
}
.组件旋转木马.控件li.已禁用{
不透明度：.2；
光标：指针；
}
.组件转盘.控件li:第一个子{
左：0；
}
.组件转盘.控制li{
过渡：所有.15秒放松；
位置：绝对位置；
排名：0；
光标：指针；
背景：url（/image/component/carousel/arrows.png）无重复左中；
身高：100%；
宽度：19px；
}
.component carousel.controls li:最后一个子项{
右：0；
背景位置：右中；
}
.按钮{
边框：1px实心#a8a8a8；
字体大小：14px；
字号：600；
背景：#FFFFFF；
位置：相对位置；
文字装饰：无；
空白：正常；
光标：指针；
颜色：#292929；
}
.btn{
位置：相对位置；
颜色：#4F4F；
左：38%；
宽度：25%！重要；
最大宽度：580像素；
文本转换：大写；
}

@使用（Html.BeginForm（“，”，FormMethod.Post，new{@class=“form horizontal”}））
{
if（Model.Details！=null&&Model.Details.Count（）>0）
{


@foreach（模型中的var项目）
{

123456

圆圈
24242
222

}






}
添加
}

伙计们，我很急着要完成这个功能，可以吗