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>

jQuery幻灯片-在一个活动的时候隐藏其他幻灯片

1 个答案: