数组文本序列有差距

Question

我有一个简单的数组文本序列可以工作，但我无法弄清楚如何让A，B和C显示2500然后循环回来。截至目前，有一个空白框架显示2500。

任何人都知道如何摆脱那个空白的序列？

＆＃13;

＆＃13;

$('#cover1-seq1').show();
	var arr = $(".cover1-seq");
	var arrLen = arr.length;
	var i = 0;

	setInterval(function(){
		$(".cover1-seq").hide();
		$(arr[i]).show();
		i === arrLen ? i = 0 : i++;
	}, 2500);

＆＃13;

.cover1-seq {
	display: none;
}
.cover1-title {
	font-size: 6rem;
	margin-bottom: 25px;
	text-align: center;
	position: relative;
    z-index: 1;
}
.cover1-description {
	font-family: 'Roboto', sans-serif;
	font-size: 3.5rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-cover1-wrap">
				<div class="total-center cover1-seq" id="cover1-seq1">
					<h1 class="cover1-title">A</h1>
					<p class="cover1-description">A description</p>
				</div>
				<div class="total-center cover1-seq">
					<h1 class="cover1-title">B</h1>
					<p class="cover1-description">B description</p>
				</div>
				<div class="total-center cover1-seq">
					<h1 class="cover1-title">C</h1>
					<p class="cover1-description">C description</p>
				</div>
			</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用模%运算符和jQuery $.eq()函数以这种方式简化代码：

＆＃13;

＆＃13;

var arr = $('.cover1-seq'); //.show();
var arrLen = arr.length;
var i = 0;

var loop = function() {
    var item = arr.eq(i);
    var description = item.find('.cover1-description');

    arr.hide();
    description.hide();

    item.show();
    description.fadeIn(2000);

    i = (i + 1) % arrLen;
};

loop();
setInterval(loop, 2500);

＆＃13;

.cover1-seq {
    display: none;
}
.cover1-title {
    font-size: 6rem;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.cover1-description {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-cover1-wrap">
    <div class="total-center cover1-seq" id="cover1-seq1">
        <h1 class="cover1-title">A</h1>
        <p class="cover1-description">A description</p>
    </div>
	<div class="total-center cover1-seq">
        <h1 class="cover1-title">B</h1>
        <p class="cover1-description">B description</p>
    </div>
    <div class="total-center cover1-seq">
        <h1 class="cover1-title">C</h1>
        <p class="cover1-description">C description</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;