javascript - 保持图像的 3D 立方体在同一侧继续过渡

Question

我已经使用本教程创建了一个像幻灯片一样移动的图像立方体。 https://webdevtrick.com/css-3d-cube-carousel/?unapproved=16788&moderation-hash=ec78aa2bd99b49552d07f0ec60049b18#comment-16788

看看正在做什么https://files.fm/u/s2ywz7my

我已使用 setInterval 将其自动移动。当立方体到达第四个图像时。它回到了第一个。

jQuery 文件

     <script>
        /** Code By Webdevtrick ( https://webdevtrick.com ) **/
        var $carousel = $('.carousel'),currentSlide, nextSlide;
        setInterval( function () 
        {
            currentSlide = $carousel.attr('data-slide');
            nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;
            $carousel.attr('data-slide', nextSlide);
        }
        , 2000);
    </script>

我希望立方体继续向左滑动，同时也在围绕自身移动。

Answer 1

通过添加一些CSS并在JS中修改，你可以循环这个立方体 slider 。但它通过更改 data-slide 值并应用 CSS 来旋转立方体来制作动画。它不是动态 slider 。

这是工作演示

$(document).ready(function() {
  
  var $carousel = $('.carousel'),
  currentSlide, nextSlide;

  $('.next').click(function() {
    if(!$carousel.hasClass('sliding')){
      currentSlide = $carousel.attr('data-slide');
      nextSlide = +currentSlide === 5 ? 0 : +currentSlide + 1;
      $carousel.attr('data-slide', nextSlide);
      $carousel.addClass('sliding');
    }
    $carousel.on('transitionend', function(){
      if(nextSlide == 5){
        $carousel.css('transition', 'none');
        $carousel.attr('data-slide', 1);
        setTimeout(function(){
          $carousel.removeAttr('style');
        },10);
      }
      $carousel.removeClass('sliding');
    });
  });

  $('.prev').click(function() {
    if(!$carousel.hasClass('sliding')){
      currentSlide = $carousel.attr('data-slide');
      nextSlide = +currentSlide === 0 ? 5 : +currentSlide - 1;
      $carousel.attr('data-slide', nextSlide);
      $carousel.addClass('sliding');
    }
    $carousel.on('transitionend', function(){
      if(nextSlide == 0){
        $carousel.css('transition', 'none');
        $carousel.attr('data-slide', 4);
        setTimeout(function(){
          $carousel.removeAttr('style');
        },10);
      }
      $carousel.removeClass('sliding');
    });
  });
});

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  margin-top: 200px;
  background: #333;
  font-family: 'Staatliches', cursive;
  font-size: 2em;
  line-height: 1.5;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 5em;
  perspective: 100em;
}
.carousel {
  position: relative;
  width: 15em;
  height: 15em;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.carousel[data-slide="0"] {
  transform: rotateY(90deg);
}
.carousel[data-slide="1"] {
  transform: rotateY(0deg);
}
.carousel[data-slide="2"] {
  transform: rotateY(-90deg);
}
.carousel[data-slide="3"] {
  transform: rotateY(-180deg);
}
.carousel[data-slide="4"] {
  transform: rotateY(-270deg);
}
.carousel[data-slide="5"] {
  transform: rotateY(-360deg);
}

.slides {
  position: absolute;
  width: 15em;
  height: 15em;
  background: white;
}
.slides img {
  width: 100%;
}
.back, .slides:nth-child(3) {
  transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .slides:nth-child(2) {
  transform: rotateY(-270deg) translateX(7.5em);
  transform-origin: top right;
}
.left, .slides:nth-child(4) {
  transform: rotateY(270deg) translateX(-7.5em);
  transform-origin: center left;
}
.front, .slides:nth-child(1) {
  transform: translateZ(7.5em);
}
.next, .prev {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6em;
  margin-top: -2.5em;
  border-radius: 3px;
  background: #212121;
  text-align: center;
  line-height: 3;
  letter-spacing: 5px;
  color: white;
  transform: translateY(-50%);
  cursor: pointer;
}
.prev:hover {
  background:  #e60023;
}
.prev {
  left: 0;
}
.next:hover {
  background:  #e60023;
}
.cf:before, .slides:before,
.cf:after,
.slides:after {
  content: " ";
  display: table;
}
.cf:after, .slides:after {
  clear: both;
}
.cf, .slides {
  *zoom: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="carousel" data-slide="1">
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=1" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=2" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=3" />
    </div>
    <div class="slides">
      <img src="https://picsum.photos/700/700?random=4" />
    </div>
  </div>
  <div class="next">NEXT &#8680;</div>
  <div class="prev">&#8678; PREV</div>
</div>

您可以在setInterval 函数中触发next 按钮来自动滑动立方体。通过添加。

setInterval( function () {
   $('.next').trigger('click');
},2000);