Fatal编程技术网
  • javascript/
  • Javascript 我想通过点击第一个和最后一个元素来实现卡片的旋转

Javascript 我想通过点击第一个和最后一个元素来实现卡片的旋转

javascript jquery arrays

Javascript 我想通过点击第一个和最后一个元素来实现卡片的旋转,javascript,jquery,arrays,carousel,Javascript,Jquery,Arrays,Carousel,我有一个由三张卡片组成的旋转木马，在Y轴上旋转，它可以工作。 当你点击button up时，它会上升，当你点击button down时，它会下降，但我想实现这样的功能。 当你点击顶部卡片时，它会上升，当你点击底部卡片时，它会下降。 我可以选择第一个div，它可以工作，但是当你点击第一个元素时，它会变成第二个，依此类推，这是一个问题。如何仅在顶部和底部的图元上触发旋转 var cards = $("#carousel > .card"), Next, Previous, nexttr

我有一个由三张卡片组成的旋转木马，在Y轴上旋转，它可以工作。 当你点击button up时，它会上升，当你点击button down时，它会下降，但我想实现这样的功能。 当你点击顶部卡片时，它会上升，当你点击底部卡片时，它会下降。 我可以选择第一个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();
});
因此，最终的结果是，当你点击最上面的卡片时，它会上升，而当你点击最下面的卡片时，它会下降，这应该会无休止地工作。

$（函数（）{
$（“.card”）。单击（函数（e）{
e、 预防默认值（）；
var thisCard=$（本）；
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'）；
}
});
});
旋转木马{
位置：绝对位置；
顶部：50px；
左：200px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
不透明度：1；
}
.卡片{
位置：绝对位置；
宽度：80px；
高度：80px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
过渡：1s；
背景：黑色；
-webkit转换：translateY（-55%）translateZ（-50px）量表（0.8）；
转换：translateY（-55%）translateZ（-50px）量表（0.8）；
}
.卡.中{
-webkit转换：translateY（0）translateZ（0）；
变换：translateY（0）translateZ（0）；
背景：#添加8e6；
}
.卡片{
-webkit转换：translateY（-55%）translateZ（-50px）量表（0.8）；
转换：translateY（-55%）translateZ（-50px）量表（0.8）；
背景#ff7f50；
}
.card.bottom{
-webkit转换：translateY（55%）translateZ（-50px）量表（0.8）；
转换：translateY（55%）translateZ（-50px）标度（0.8）；
背景#7fff00；
}


<!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;
}