问jQuery幻灯片-当一个幻灯片处于活动状态时隐藏其他幻灯片
EN

Stack Overflow用户

提问于 2018-09-15 15:25:52

回答 1查看 51关注 0票数 0

我正在尝试使用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，而不必同时显示多个项？

javascript

jquery

Stack Overflow用户

回答已采纳

发布于 2018-09-15 16:14:11

您可以使用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>

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52346115

复制

相似问题

问jQuery幻灯片-当一个幻灯片处于活动状态时隐藏其他幻灯片
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery幻灯片-当一个幻灯片处于活动状态时隐藏其他幻灯片EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery幻灯片-当一个幻灯片处于活动状态时隐藏其他幻灯片
EN