Question

我将这个js用于3d旋转木马。在为当前幻灯片分配活动类时，我正在分散。以下是我最近的尝试。我认为我最接近另一种方法。我没有包括CSS，因为我没有发现它相关，如果需要请告诉我。 https://jsfiddle.net/ubxvyh5j/6/

var carousel = $(".carousel"),
currdeg = 0;

$(".next").on("click", {d: "n"}, rotate);
$(".prev").on("click", {d: "p"}, rotate);

function rotate(e) {
    if (e.data.d == "n") {
        currdeg = currdeg - 120;      
    }
    if (e.data.d == "p") {
        currdeg = currdeg + 120;
    }
carousel.css({
    "-webkit-transform": "rotateY(" + currdeg + "deg)",
    "-moz-transform": "rotateY(" + currdeg + "deg)",
    "-o-transform": "rotateY(" + currdeg + "deg)",
    "transform": "rotateY(" + currdeg + "deg)"
  });
  $(this('.item')).addClass('active'); // this is what is not working
}

HTML

<div class="carousel">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

CSS

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(120deg) translateZ(250px);
  background: #0072bc;
}
.c {
  transform: rotateY(240deg) translateZ(250px);
  background: #39b54a;
}
.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}

Answer 1

您应该添加一个记住当前活动元素位置的计数器。您不能使用$(this('.item')).addClass('active');，因为它不是有效的声明。

我修复了您的JavaScript代码，以便它可以正常工作：

var carousel = $(".carousel"),
    currdeg = 0,
    itemsArray = carousel.find('.item'),
    currActive = 0;

$(".next").on("click", {d: "n"}, rotate);
$(".prev").on("click", {d: "p"}, rotate);

function rotate(e) {
    var $active = $(carousel.find('.active'));

    $active.removeClass('active');
    if (e.data.d == "n") {
        currdeg = currdeg - 120;  
        currActive = (currActive + 1) % itemsArray.length;
    }
    if (e.data.d == "p") {
        currdeg = currdeg + 120;
        currActive = (currActive - 1 + itemsArray.length) % itemsArray.length;

    }
    $(itemsArray[currActive]).addClass('active'); // add the class to the active element
    carousel.css({
      "-webkit-transform": "rotateY(" + currdeg + "deg)",
      "-moz-transform": "rotateY(" + currdeg + "deg)",
      "-o-transform": "rotateY(" + currdeg + "deg)",
      "transform": "rotateY(" + currdeg + "deg)"
    }); 
}

您可以看到example here

Answer 2

修改

在增加之前有限制，它是跳过计数。通过在增量后放置限制来纠正它。添加了.active样式以跟踪其当前分配。如果当前.item有一个红色虚线轮廓，那么它的功能正常。当然，这种风格只是为了测试所以它是安全的。

<小时/> .carousel正在旋转，.items正在行驶。因此，请尝试通过计数器引用.item。详细信息在Snippet中进行了注释。

<强>段

var carousel = $(".carousel"), currdeg = 0; // .item.a is at starting position 1 var counter = 0; $(".next").on("click", { d: "n" }, rotate); $(".prev").on("click", { d: "p" }, rotate); function rotate(e) { console.log(e.data.d); if (e.data.d == "n") { currdeg = currdeg - 120; // Incremental increase forward direction counter++; } if (e.data.d == "p") { currdeg = currdeg + 120; // Incremental decrease backward direction counter--; } // If you go past A you end up at C if (counter < 1) { counter = 3 } // If you go past C you end up at A if (counter > 3) { counter = 1 } console.log(counter); carousel.css({ "-webkit-transform": "rotateY(" + currdeg + "deg)", "-moz-transform": "rotateY(" + currdeg + "deg)", "-o-transform": "rotateY(" + currdeg + "deg)", "transform": "rotateY(" + currdeg + "deg)" }); // Remove '.active' class on any .item that has it $('.item').removeClass('active'); // Pass counter to a switch function switch (counter) { // If counter = 1 case 1: // addClass .active to .a $('.a').addClass('active'); // Stop and leave switch, etc.... break; case 2: $('.b').addClass('active'); break; case 3: $('.c').addClass('active'); break; default: $('.a').addClass('active'); break; } }

.carousel { height: 100%; width: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } .item { display: block; position: absolute; background: #000; width: 250px; height: 200px; line-height: 200px; font-size: 5em; text-align: center; color: #FFF; opacity: 0.95; border-radius: 10px; } .a { transform: rotateY(0deg) translateZ(250px); background: #ed1c24; } .b { transform: rotateY(120deg) translateZ(250px); background: #0072bc; } .c { transform: rotateY(240deg) translateZ(250px); background: #39b54a; } .next, .prev { color: #444; position: absolute; top: 100px; padding: 1em 2em; cursor: pointer; background: #CCC; border-radius: 5px; border-top: 1px solid #FFF; box-shadow: 0 5px 0 #999; transition: box-shadow 0.1s, top 0.1s; } .container { margin: 0 auto; width: 250px; height: 200px; position: relative; perspective: 1000px; } .active { outline: 5px dashed red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="carousel"> <div class="item a active">A</div> <div class="item b">B</div> <div class="item c">C</div> </div> </div> <div class="next">Next</div> <div class="prev">Prev</div>

将类激活添加到当前幻灯片3d转盘

2 个答案: