要始终连续显示3张卡片,可以通过以下步骤实现:
<div>
元素来实现。给每个卡片一个唯一的标识符,例如card1、card2和card3。display: flex;
来实现卡片的水平排列。document.getElementById()
方法获取卡片容器的引用。setInterval()
函数创建一个计时器,设定一个时间间隔。display
属性来控制卡片的显示和隐藏。可以使用style.display
属性来设置。HTML:
<div id="cardContainer">
<div id="card1" class="card">Card 1</div>
<div id="card2" class="card">Card 2</div>
<div id="card3" class="card">Card 3</div>
</div>
CSS:
#cardContainer {
display: flex;
justify-content: space-between;
}
.card {
width: 200px;
height: 150px;
border: 1px solid #000;
background-color: #f0f0f0;
}
JavaScript:
var cardContainer = document.getElementById("cardContainer");
var currentIndex = 0;
setInterval(function() {
var cards = cardContainer.getElementsByClassName("card");
for (var i = 0; i < cards.length; i++) {
cards[i].style.display = "none";
}
cards[currentIndex].style.display = "block";
if (currentIndex < 2) {
currentIndex++;
} else {
currentIndex = 0;
}
}, 2000);
在上述代码中,卡片容器的ID为"cardContainer",卡片的类名为"card"。通过设置计时器,每2秒钟切换显示下一张卡片,实现连续显示3张卡片的效果。
请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云