我有一个包含三张卡片的轮播，在 Y 轴上旋转并且它可以工作。 当您单击向上按钮时，它会上升，当您单击向下按钮时，它会下降，但我想实现这样的功能。 当你点击顶部的卡片时，它会上升，当你点击底部的卡片时，它会下降。 我可以选择第一个 div 并且它可以工作，但是当您单击第一个元素时，它会变成第二个元素，依此类推，这是一个问题。如何仅在顶部和底部的元素上触发旋转？
var cards = $("#carousel > .card"), Next, Previous,
nexttransforms =[
{y: '-55%', z: '-50px', scale: 0.8,},
{y: '55%', z: '-50px', scale: 0.8,},
{y: 0, z: 0, scale: 1,},
];
Next = function(){
nexttransforms.push(nexttransforms.shift());
for(i=0; i<cards.length; i++){
var kartica = cards[i];
$(kartica).css({
'transform': 'translateY('+ nexttransforms[i].y +') translateZ(' + nexttransforms[i].z + ') scale(' + nexttransforms[i].scale+')',
});
}
};
Previous = function(){
for(i=0; i<=cards.length-2; i++){
nexttransforms.push(nexttransforms.shift());
}
for(i=0; i<cards.length; i++){
var x = nexttransforms[i];
var kartica = cards[i];
$(kartica).css({'transform': 'translateY('+ x.y +') translateZ(' + x.z + ') scale(' + x.scale+')',
});
}
};
$('#down').on('click', function(){
Previous();
});
$('#up').on('click', function(){
Next();
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
<button id="up">Up</button>
<button id="down">Down</button>
<script src="js/fix.js"></script>
</body>
</html>
#carousel {
position: absolute;
top: 40px;
left: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 1;
}
.card {
position: absolute;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 1s;
background: black;
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
}
.card:nth-child(3) {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
background: #add8e6;
}
.card:nth-child(1) {
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
background: #ff7f50;
}
.card:nth-child(2) {
-webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
transform: translateY(55%) translateZ(-50px) scale(0.8);
background: #7fff00;
}
所以最终的结果是，当你点击顶部的卡片时，它会上升，当你点击底部的卡片时，它会下降，这应该会无限地工作。
最佳答案
$(function(){
$('.card').click(function(e){
e.preventDefault();
var thisCard = $(this);
var topCard = $('.card.top');
var midCard = $('.card.middle');
var botCard = $('.card.bottom');
if (thisCard.hasClass('top'))
{
topCard.removeClass('top').addClass('bottom');
midCard.removeClass('middle').addClass('top');
botCard.removeClass('bottom').addClass('middle');
}
else if (thisCard.hasClass('bottom'))
{
topCard.removeClass('top').addClass('middle');
midCard.removeClass('middle').addClass('bottom');
botCard.removeClass('bottom').addClass('top');
}
});
});#carousel {
position: absolute;
top: 50px;
left: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 1;
}
.card {
position: absolute;
width: 80px;
height: 80px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 1s;
background: black;
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
}
.card.middle {
-webkit-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0);
background: #add8e6;
}
.card.top {
-webkit-transform: translateY(-55%) translateZ(-50px) scale(0.8);
transform: translateY(-55%) translateZ(-50px) scale(0.8);
background: #ff7f50;
}
.card.bottom {
-webkit-transform: translateY(55%) translateZ(-50px) scale(0.8);
transform: translateY(55%) translateZ(-50px) scale(0.8);
background: #7fff00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
<div class="card top"></div>
<div class="card middle"></div>
<div class="card bottom"></div>
</div>关于javascript - 我想通过单击第一个和最后一个元素来实现卡片的旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54620386/