<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my slider</title>
<link rel="icon" type="image/x-icon" href="../pages/images/favicon.ico">
<!-- stylesheet -->
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.card-container {
width: 100%;
overflow: hidden;
border: 2.5px solid #000000;
margin: 20px auto;
}
.card-slider {
display: flex;
border: 1.5px solid #ff0000;
}
.card {
flex: 0 0 auto;
width: 100%;
max-width: 300px;
height: 200px;
margin-right: 20px;
transition: transform 0.5s ease;
text-align: center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -285px;
}
.next {
right: 0px;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card-slider">
<div class="card" style="background-color: #0ffff0;">Card One</div>
<div class="card" style="background-color: #cab;">Card Two</div>
<div class="card" style="background-color: #12abc2;">Card Three</div>
<div class="card" style="background-color: #9000bc;">Card Four</div>
<div class="card" style="background-color: #500bc1;">Card Five</div>
<div class="card" style="background-color: #acb111;">Card Six</div>
</div>
</div>
<button class="prev" onclick="previousSlide()">❮</button>
<button class="next" onclick="nextSlide()">❯</button>
<script type="text/javascript">
let currentCard = 0;
let cards = document.querySelectorAll(".card");
let totalCards = cards.length;
function showCard() {
cards[currentCard].style.transform = `translateX(${-100}%)`; // trying to move this card left
/* only first click above statement execute correctly and move card left
but also other click above statement execute but not as I expect
on second, third etc click above statement move card right direction instead of left direction
I got the correct logic for above statement to excecute correct way to move card in left direction
I modify the above statement from this cards[currentCard].style.transform = `translateX(${-100}%)`;
to this cards[currentCard].style.transform = `translateX(${-100 * (currentCard + 1)}%)`;
but I want explanation why cards[currentCard].style.transform = `translateX(${-100}%)`; statement
move cards to right direction not for first click but second, third etc clicks. */
// after moving above card space created between currentCard and currentCard +1
// this for loop for remove space between the cards
for(let i = currentCard + 1; i < totalCards; i++ ) {
// cards[i].style.transform = `translateX(${-100}%)`;
// cards[i].style.transform = `translateX(${-100 * (currentCard + 1) }%)`;
cards[i].style.transform = `translateX(calc(${-100 * (currentCard + 1)}% + ${(currentCard + 1) * -20}px ))`;
console.log("Value of i: ", i, " currentCard: ", currentCard);
}
// after come out from for loop slide currentCard end of the all other cards
cards[currentCard].style.transform = `translateX(${100 * totalCards}%)`;
// increment currentCard
currentCard++;
}
function nextSlide () {
showCard();
}
</script>
</body>
</html>
我正在try 创建一个卡片滑动器来滑动单个卡片 我的逻辑:
函数show card(){.} 该功能的第一个声明是左滑当前卡-100% 滑动currentCard和currentCard +1之间的当前卡空间后 删除空间，创建一个循环以将卡片一一滑动至100%
从for循环出来后，将当前卡移至最后一张卡的结尾
增量currentCard; 函数nextSlide(){.} 显示当前卡
但showCard()的第一个声明{.}函数和for循环只运行一次. 为什么？？我的代码中有什么问题请回答我的问题或帮助我提供更好的解决方案或一步一步解释我的代码.