javascript - 数组文本序列有间隙

Question

我有一个简单的数组文本序列，但我不知道如何让 A、B 和 C 显示 2500，然后循环返回。截至目前，有一个显示 2500 的空白框。

有人知道我怎样才能去掉那个空白序列吗？

$('#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);

.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;
}

<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>

Answer 1

您可以使用模 % 运算符和 jQuery $.eq() 函数来简化您的代码:

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);

.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;
}

<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>