我正在尝试使用 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
它必须一次显示多个项目吗?
最佳答案
您可以使用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>
关于javascript - jQuery Slideshow - 在一张幻灯片处于事件状态时隐藏其他幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52346115/