Javascript 如何让一系列元素循环一次只显示一个元素

我正试图让我的span elements agencyText一次显示一个。然后在应用curr和next类的间隔结束时，正确定位要显示的当前和下一位文本

到目前为止，我正在一次将它们全部显示出来。我用数据属性索引值创建了它们。但是，我不确定如何循环使用它们，以使其正确工作

有一个例子正好说明了我正在尝试做的事情的左侧。它是文本旋转了90度。每四秒钟更新一次措辞

有人知道我如何修改代码来复制它吗

更新-显示示例的DOM代码

var arr=$'.textContainer'； var arrLen=arr.长度； var i=0； var attr=$'agencyText'。数据'index'； var循环=函数{ var项目=arr.eqi； var description=item.find'.agencyText'； description.addClass'curr'； i=i+1%阿伦； }; 环 setIntervalloop，3000； .数码代理{ 高度：20px； 位置：固定； 最高：50%； 左-45%； 宽度：100%； 文本转换：大写； 字号：700； 字体大小：14px； 字母间距：1px； -webkit转换：不透明度。5s； -o-转变：不透明度。5s； 转变：不透明度。5s； -webkit转换：不透明度。5s； -o-转变：不透明度。5s； 转变：不透明度。5s； } .digitalAgency.textContainer:：之前{ 内容：； 位置：绝对位置； 宽度：40px； 高度：1px； 背景：2000人； 显示：内联块； 最高：50%； 右边距：20px； 左：33%； } .digitalAgency.textContainer{ 位置：相对位置； 宽度：650px； 身高：100%； 左：50%； -webkit变换：translateX-50%旋转-90度； -ms变换：translateX-50%旋转-90度； 变换：translateX-50%旋转-90度； 显示：内联块； } .digitalAgency、.agencyText{ -webkit动画持续时间：.45秒； 动画持续时间：.45秒； -webkit动画填充模式：正向； 动画填充模式：正向； -webkit动画计时功能：轻松输入输出； 动画计时功能：轻松进出； } .digitalAgency.textContainer.agencyText{ 左侧填充：60px； 位置：绝对位置； 可见性：隐藏； 宽度：100%； 身高：100%； 左：33%； } .digitalAgency.textContainer.agencyText.curr{ 能见度：可见； } .digitalAgency.agencyText.curr{可见性：可见；-webkit动画名称：DGAGNCUR；动画名称：DGAGNCUR} .digitalAgency.agencyText.next{可见性：可见；-webkit动画名称：DGAGNEXT；动画名称：DGAGNEXT} @-webkit关键帧dgAgnCurr{从{-webkit transform:translateY0；transform:translateY0}到{-webkit transform:translateY-100%；transform:translateY-100%} @关键帧dgAgnCurr{从{webkit transform:translateY0；transform:translateY0}到{-webkit transform:translateY-100%；transform:translateY-100%} @-webkit关键帧DGAGNEXT{从{-webkit变换：translateY100%；变换：translateY100%}到{-webkit变换：translateY0；变换：translateY0} @关键帧DGAGNEXT{从{webkit transform:translateY100%；transform:translateY100%}到{-webkit transform:translateY0；transform:translateY0} 第一个 第二个 第三个 第四个

---

我已经更新了你的javascript代码。像这样试试

var arr=$”.textContainer>span'； var arrLen=arr.长度； var i=0； var循环=函数{ $'.textContainer>span'.removeClass'curr'； $'span[data index='+i+']'.addClass'curr'； i=i+1%阿伦； }; 环 setIntervalloop，3000； .数码代理{ 高度：20px； 位置：固定； 最高：50%； 左-45%； 宽度：100%； 文本转换：大写； 字号：700； 字体大小：14px； 字母间距：1px； -webkit转换：不透明度。5s； -o-转变：不透明度。5s； 转变：不透明度。5s； -webkit转换：不透明度。5s； -o-转变：不透明度。5s； 转变：不透明度。5s； } .digitalAgency.textContainer:：之前{ 内容：； 位置：绝对位置； 宽度：40px； 高度：1px； 背景：2000人； 显示：内联块； 最高：50%； 右边距：20px； 左：33%； } .digitalAgency.textContainer{ 位置：相对位置； 宽度：650px； 身高：100%； 左：50%； -webkit变换：translateX-50%旋转-90度； -ms变换：translateX-50%旋转-90度； 变换：translateX-50%旋转-90度； 显示：内联块； } .digitalAgency、.agencyText{ -webkit动画持续时间：.45秒； 动画持续时间：.45秒； -webkit动画填充模式：正向； 动画填充模式：正向； -webkit动画计时功能：轻松输入输出； 动画计时功能：轻松进出； } .digitalAgency.textContainer.agencyText{ 左侧填充：60px； 位置：绝对位置； 可见性：隐藏； 宽度：100%； 身高：100%； 左：33%； } .digitalAgency.textContainer.agencyText.curr{ 能见度：可见； } .digitalAgency.agencyText.curr{vis 可变性：可见-webkit动画名称：dgAgnCurr；动画名称：dgAgnCurr} .digitalAgency.agencyText.next{可见性：可见；-webkit动画名称：DGAGNEXT；动画名称：DGAGNEXT} @-webkit关键帧dgAgnCurr{从{-webkit transform:translateY0；transform:translateY0}到{-webkit transform:translateY-100%；transform:translateY-100%} @关键帧dgAgnCurr{从{webkit transform:translateY0；transform:translateY0}到{-webkit transform:translateY-100%；transform:translateY-100%} @-webkit关键帧DGAGNEXT{从{-webkit变换：translateY100%；变换：translateY100%}到{-webkit变换：translateY0；变换：translateY0} @关键帧DGAGNEXT{从{webkit transform:translateY100%；transform:translateY100%}到{-webkit transform:translateY0；transform:translateY0} 第一个 第二个 第三个 第四个

---

而不是这样做$'span'。删除类'curr'。如何将下一个类添加到下一个元素中？您可以使用$'.textContainer>span.removeClass'curr'来代替removeClass，我有一个名为next的css类，它有一个关键帧来重新定位将要循环的下一个元素…它还有其他与之关联的css属性。如何修改此代码以在间隔中显示循环中的下一个元素，然后添加下一个类？如果您查看示例站点的源代码，就会明白我的意思。我在我的问题中添加了一个img，控制台在DOM中显示了这一点，以帮助说明。您可以向下一个元素添加下一个类，如$'span[data index='+I+1+']'。addClass'next'；谢谢你的帮助！你能解释一下这是怎么工作的吗span[data index='+i+']'.addClass'curr'；i=i+1%阿伦；我想了解这在JS中是如何工作的。下一步添加类可以使它在原始代码中可见。使用下面的Syed代码，添加下一个类并将可见性更改为hidden，结果是。可能需要调整动画以获得示例的滚动功能。@DaveStSomeWhere谢谢您的帮助。太完美了！“我很感激。”戴维斯特：“你能解释一下这是怎么工作的吗？”span[data index='+i+']'.addClass'curr'；i=i+1%阿伦；我想了解这在JS中是如何工作的；正在执行jQuery属性选择器插入i变量。您的示例有4个索引属性为0到4的跨度元素，因此只有0,1,2,3是有效的。为了连续循环0到3的值，Syed使用了模%余数操作数。i是0，加1，除以arrLen 4，余数是1-现在索引是1。当你点击最后一个i=3，那么i是3，加1得到4，除以4，得到1，余数为零，然后在开始时再次循环-我只得到余数的设置。有道理？