javascript - 如何让一系列元素循环显示一次只显示一个
问题描述
我试图让我的跨度元素agencyText
一次出现一个。然后在间隔结束时应用curr
和next
类以正确定位当前和下一位要出现的文本。
到目前为止,我正在一次将它们全部显示出来。我用数据属性索引值创建了它们。但是,我不确定如何遍历它们以使其正常工作。
如果您单击此链接,则左侧有一个我正在尝试做的示例。它是旋转 90 度的文本。每四秒更新一次措辞。
有谁知道我如何修改我的代码来复制它?
更新 - 显示示例的 DOM 代码。
var arr = $('.textContainer');
var arrLen = arr.length;
var i = 0;
var attr = $('agencyText').data('index');
var loop = function() {
var item = arr.eq(i);
var description = item.find('.agencyText');
description.addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
@-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>
解决方案
我已经更新了你的 JavaScript 代码。试试这样
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var loop = function() {
$('.textContainer > span').removeClass('curr');
$('span[data-index = '+i+']').addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
@-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>
推荐阅读
- python - 如何在 tkinter 中显示创建的缩略图而不先保存它?
- ruby-on-rails - 使用 AND 和 OR 轨道组合创建过滤器
- postgresql - 如何在 Postgres-XL 中将 SEQUENCE 设置为 DEFAULT?
- c++ - 是否可以在 C 或 C++ 中基于 JSON 动态创建 if 语句
- php - 如何在 PHP 的 apache_request_headers 中添加 HEADER
- android - 遍历可选对象列表
- python - json.dumps - 控制输出中的引用
- javascript - 在加载图像上创建 JavaScript 函数
- java - Titan Graph 数据迁移
- sql - 用于插入/更新的单表 sql 查询返回无表关系的错误,我该如何修复此语句?