jQuery 幻灯片 - 在一张幻灯片处于活动状态时隐藏其他幻灯片

Question

我正在尝试使用jQuery制作一个非常简单的幻灯片。我第一次尝试了position: absolute让它工作，但这会干扰布局，所以我现在决定尝试使用display:来代替。

我目前有这个代码：

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
	$(".slideshow > a").hide();
$('.slideshow a:first').css('display', 'block');
	setInterval(function() {
		$('.slideshow > a').css('display', 'none');
		$('.slideshow a:first').css('display', 'block').show().next().show().end().appendTo('.slideshow');
	}, 3000);
</script>
<div class="slideshow">
<a href="">Hello 1</a>
<a href="">Hello 2</a>
<a href="">Hello 3</a>
<a href="">Hello 4</a>
</div>

如何使其仅按顺序显示1、2、3、4，而不必一次显示多个项目？

Answer 1

您可以使用class更改display并计算将要显示的下一个a的索引。

let $a = $(".slideshow a");
$a.eq(0).addClass("show");
setInterval(function() {
let index = $(".show").index();
let next = (index + 1) % 4;
$a.removeClass("show").eq(next).addClass("show");
}, 3000);

.slideshow a {
display: none;
}
.slideshow a.show{
display: block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<div class="slideshow">
<a href="">Hello 1</a>
<a href="">Hello 2</a>
<a href="">Hello 3</a>
<a href="">Hello 4</a>
</div>