javascript - jQuery Slideshow - 在一张幻灯片处于事件状态时隐藏其他幻灯片

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来更改显示并计算下一个要显示的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>