我需要一些帮助来创建一个卡片传送带,该卡片传送带在单击卡片时会向左或向右滑动,并且仅在单击中间的卡片时才打开链接。第一部分(滑动卡)正在工作。但是,我在找出如何使居中的卡片单击后打开链接时遇到困难。我不希望左侧和右侧的卡打开链接,这就是为什么所有卡都具有pointer-events:none
属性的原因。
我已经尝试删除中心卡的pointer-events:none
属性(带有.center-card {pointer-events:auto;}
),但这没有用。另外,从pointer-events:none
中删除.card
并将其左右添加到卡中,使整个Javascript代码无用。
我绝对是Java语言的初学者,因此非常感谢您的帮助。或者,如果可能的解决方案只能用HTML / CSS完成,那就太好了。
const Cards = (() => {
window.addEventListener(
"DOMContentLoaded",
() => {
setTimeout(init, 1);
},
true
);
function init(e) {
if (document.querySelector(".carousel")) {
let cards = document.querySelector(".carousel");
cards.addEventListener("click", clicked, false);
document.querySelectorAll(".carousel .card")[1].click();
}
}
function clicked(e) {
let card = e.target;
if (card.getAttribute("data-card")) {
rearrange(card.getAttribute("data-card"));
}
}
function rearrange(card) {
let cards = document.querySelectorAll(".carousel .card");
for (let n = 0; n < cards.length; n++) {
cards[n].classList.remove("card-left-left");
cards[n].classList.remove("card-left");
cards[n].classList.remove("card-center");
cards[n].classList.remove("card-right");
cards[n].classList.remove("card-right-right");
}
cards[card].classList.add("card-center");
if (card == 0) {
cards[3].classList.add("card-left-left");
cards[4].classList.add("card-left");
cards[1].classList.add("card-right");
cards[2].classList.add("card-right-right");
}
if (card == 1) {
cards[4].classList.add("card-left-left");
cards[0].classList.add("card-left");
cards[2].classList.add("card-right");
cards[3].classList.add("card-right-right");
}
if (card == 2) {
cards[0].classList.add("card-left-left");
cards[1].classList.add("card-left");
cards[3].classList.add("card-right");
cards[4].classList.add("card-right-right");
}
if (card == 3) {
cards[1].classList.add("card-left-left");
cards[2].classList.add("card-left");
cards[4].classList.add("card-right");
cards[0].classList.add("card-right-right");
}
if (card == 4) {
cards[2].classList.add("card-left-left");
cards[3].classList.add("card-left");
cards[0].classList.add("card-right");
cards[1].classList.add("card-right-right");
}
}
return {
init
};
})();
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: Poppins, Roboto, Arial;
}
#container {
background-color: #fff;
width: 100%;
height: 200%;
position: relative;
z-index: 0;
}
.carousel
{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 75%;
top: 950px;
margin: 0 auto;
}
.card
{
display: flex;
width: 25rem;
height: 20rem;
border-radius: 0.5rem;
transform-origin: center center;
transform: scale(1) translate(0px,0px) perspective(750px) rotateY(0deg);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-duration: 0.5s;
position: absolute;
top: 0;
z-index: 3;
cursor: pointer;
background: #fff;
overflow: hidden;
margin: 50px 0 50px 0;
}
.card *
{
pointer-events: none;
}
.card-left-left {
opacity: 0.7;
transform: scale(0.5) translate(-600px,0px) perspective(750px) rotateY(10deg);
z-index: 0;
}
.card-left
{
transform: scale(0.7) translate(-300px,0px) perspective( 750px ) rotateY(10deg);
-webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
-moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
z-index: 1;
}
.card-center
{
transform: scale(1) translate(0px, 0px) perspective( 750px ) rotateY(0deg);
-webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
-moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
z-index: 3;
}
.card-right
{
transform: scale(0.7) translate(300px,0px) perspective( 750px ) rotateY(-10deg);
-webkit-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
-moz-box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
box-shadow: -1px 21px 11px -2px rgba(0,0,0,0.25);
z-index: 1;
}
.card-right-right {
opacity: 0.7;
transform: scale(0.5) translate(600px,0px) perspective( 750px ) rotateY(-10deg);
z-index: 0;
}
.card-image
{
width: 100%;
height: 80%;
background: #fff;
position: absolute;
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
clear: both;
}
.card-image img {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.card-text
{
width: 100%;
height: 20%;
display: flex;
position: relative;
top: 80%;
justify-content: center;
}
.card-text p {
padding: 20px;
margin: 0;
color: black;
}
<div id="container">
<div class="carousel">
<div class="card" data-card="0">
<div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
</div>
<div class="card-text"><p>Tekst 1</p>
</div>
</div>
<div class="card" data-card="1">
<div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
</div>
<div class="card-text"><p>Tekst 2</p>
</div>
</div>
<div class="card" data-card="2">
<div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
</div>
<div class="card-text"><p>Tekst 3</p>
</div>
</div>
<div class="card" data-card="3">
<div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
</div>
<div class="card-text"><p>Tekst 4</p>
</div>
</div>
<div class="card" data-card="4">
<div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" />
</div>
<div class="card-text"><p>Tekst 5</p>
</div>
</div>
</div>
</div>
看看这个。我也想重写重新排列功能,但这是所需的最小更改。
[如果您也想单击文本,则可以添加onclicklocation=hrefs[this.closest(".card").getAttribute("data-card")]
const hrefs=["page1.html","page2.html","page3.html","page4.html","page5.html"]
function clicked(e) {
let card = e.target;
let index = card.getAttribute("data-card");
if (card.getAttribute("data-card")) {
if (card.classList.contains("card-center")) {
location = hrefs[index]
}
else rearrange(index);
}
}
const Cards = (() => { window.addEventListener( "DOMContentLoaded", () => { setTimeout(init, 1); }, true ); function init(e) { if (document.querySelector(".carousel")) { let cards = document.querySelector(".carousel"); cards.addEventListener("click", clicked, false); document.querySelectorAll(".carousel .card")[1].click(); } } const hrefs = ["page1.html", "page2.html", "page3.html", "page4.html", "page5.hrml"] function clicked(e) { let card = e.target; let index = card.getAttribute("data-card"); if (card.getAttribute("data-card")) { if (card.classList.contains("card-center")) { location = hrefs[index] } else rearrange(index); } } function arrayRotate(arr, count) { count -= arr.length * Math.floor(count / arr.length); arr.push.apply(arr, arr.splice(0, count)); return arr; } let arr = [0, 1, 2, 3, 4] const cnt = { "-left-left": -2, "-left": -1, "-center": 0, "-right": 1, "-right-right": 2 } const keys = Object.keys(cnt); function rearrange(card) { const cardDiv = document.querySelector('[data-card="' + card + '"]') const cardClass = cardDiv ? cardDiv.className.replace(/card|,-/g, "").trim() : ""; const count = cnt[cardClass]; if (count) { arrayRotate(arr, count) } arr.forEach((index, i) => { let thisCard = document.querySelector('[data-card="' + index + '"]') thisCard.className = "card card" + keys[i] }) let cards = document.querySelectorAll(".carousel .card"); } return { init }; })();
html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; font-family: Poppins, Roboto, Arial; } #container { background-color: #fff; width: 100%; height: 200%; position: relative; z-index: 0; } .carousel { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 75%; top: 950px; margin: 0 auto; } .card { display: flex; width: 25rem; height: 20rem; border-radius: 0.5rem; transform-origin: center center; transform: scale(1) translate(0px, 0px) perspective(750px) rotateY(0deg); transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); transition-duration: 0.5s; position: absolute; top: 0; z-index: 3; cursor: pointer; background: #fff; overflow: hidden; margin: 50px 0 50px 0; } .card * { pointer-events: none; } .card-left-left { opacity: 0.7; transform: scale(0.5) translate(-600px, 0px) perspective(750px) rotateY(10deg); z-index: 0; } .card-left { transform: scale(0.7) translate(-300px, 0px) perspective( 750px) rotateY(10deg); -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); z-index: 1; } .card-center { transform: scale(1) translate(0px, 0px) perspective( 750px) rotateY(0deg); -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); z-index: 3; } .card-right { transform: scale(0.7) translate(300px, 0px) perspective( 750px) rotateY(-10deg); -webkit-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); -moz-box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); box-shadow: -1px 21px 11px -2px rgba(0, 0, 0, 0.25); z-index: 1; } .card-right-right { opacity: 0.7; transform: scale(0.5) translate(600px, 0px) perspective( 750px) rotateY(-10deg); z-index: 0; } .card-image { width: 100%; height: 80%; background: #fff; position: absolute; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; clear: both; } .card-image img { min-width: 100%; min-height: 100%; margin: 0; padding: 0; } .card-text { width: 100%; height: 20%; display: flex; position: relative; top: 80%; justify-content: center; } .card-text p { padding: 20px; margin: 0; color: black; }
<div id="container"> <div class="carousel"> <div class="card" data-card="0"> <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" /> </div> <div class="card-text"> <p>Tekst 1</p> </div> </div> <div class="card" data-card="1"> <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" /> </div> <div class="card-text"> <p>Tekst 2</p> </div> </div> <div class="card" data-card="2"> <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" /> </div> <div class="card-text"> <p>Tekst 3</p> </div> </div> <div class="card" data-card="3"> <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" /> </div> <div class="card-text"> <p>Tekst 4</p> </div> </div> <div class="card" data-card="4"> <div class="card-image"><img src="https://www.arohatours.co.nz/media/1509/coromandel-hahai.jpg?anchor=center&mode=crop&width=600&height=450&rnd=131772666290000000&quality=80" /> </div> <div class="card-text"> <p>Tekst 5</p> </div> </div> </div> </div>