Question

我有一个滑块，我一直在努力工作。它的演示是3张幻灯片，但我试图添加4.当我添加它时，4项是

永久地在后面
在右侧图片下

如果有办法的话，我不太清楚如何解决这个问题。为了帮助描述我正在寻找的东西，想象下面的是我的图表：

        [back img] 

[left img]      [right img]

        [front img]

我试图让它旋转。目前，您可以看到前/左/右图像，这是我需要的，但您也可以看到背面图像。

我基本上需要隐藏背面图像，所以无论哪个图像在该位置，都要隐藏它。

以下是HTML

中的设置

<div class='p_slider'>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch1.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch2.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
  <div class='p_slider__item'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/iwatch3.png'>
  </div>
</div>

CSS中的定位

.p_slider__item:nth-of-type(1) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: -200px;
  -webkit-filter: blur(2px);
  opacity: 0.8;
  z-index: 1;
}
.p_slider__item:nth-of-type(2) {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  left: 0px;
  z-index: 2;
}
.p_slider__item:nth-of-type(3) {
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  left: 200px;
  z-index: 1;
  -webkit-filter: blur(2px);
  opacity: 0.8;
}

.p_slider__item:nth-of-type(4) {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  left: 0px;
  z-index: 2;
}

我在这方面投入了相当多的代码，但为了保持简短，我还有 JS Fiddle Link 。我知道这是非常定制的工作，所以我很感激所有的帮助！谢谢！

我尝试过什么

更新了4个全部移动的项目： DEMO

所以我现在有4个项目在旋转，但滑块想要这样做。

将前方图像向右滑动

将左侧图像滑动到中心

将（新中心）img滑动到左侧并与左侧交换

向右滑动（新中心），向左滑动到中心

Answer 1

您可以通过分别为左侧，右侧，前侧和后侧定义类来简化旋转代码，并根据rotateLeft（）或rotateRight（）函数将它们添加到元素中。

CSS：

.back
{
    -webkit-transform: scale(0.4);
     -ms-transform: scale(0.4);
        transform: scale(0.4);
    left:0px;   
    z-index: 1;
    -webkit-filter: blur(2px);
}
.front
{
    -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
      left: 0px;
      z-index: 3;
}
.left
{
    -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
    left: -200px;  
    opacity: 0.8;
    z-index: 2;
    -webkit-filter: blur(2px);
}
.right
{
      -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
      left: 200px;
      z-index: 2;
      -webkit-filter: blur(2px);
      opacity: 0.8;
}

JS：

// 3D Slider for Reece


on = 0;  // Init
time = 500; // Set the delay before the next click is accepted to 1 second

// Right
$('.right').click(function () {
    rotateRight(); // Call
    on = 1; // Set delay on
});

// Left
$('.left').click(function () {
    rotateLeft(); // Call
    on = 1; // Set delay on
});

play = setInterval(function () {
    rotateLeft()
}, 3000)

// Rotate left
function rotateLeft() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('left');
        leftElem.removeClass('left').addClass('back');
        backElem.removeClass('back').addClass('right');
        rightElem.removeClass('right').addClass('front');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

// Rotate right
function rotateRight() {
    if (on == 0) {
        var frontElem = $('.p_slider__item.front');
        var leftElem = $('.p_slider__item.left');
        var backElem = $('.p_slider__item.back');
        var rightElem = $('.p_slider__item.right');

        frontElem.removeClass('front').addClass('right');
        leftElem.removeClass('left').addClass('front');
        backElem.removeClass('back').addClass('left');
        rightElem.removeClass('right').addClass('back');

        setTimeout(function () {
            on = 0; // Accept clicks again
        }, time)
    }
}

$('.p_slider__item img').hover(function () {
    clearInterval(play)
})
$('.p_slider__item img').mouseenter(function () {
    $(this).animate({ 'top': '-14px' }, 300);
})
$('.p_slider__item img').mouseout(function () {
    $(this).stop(true, false).animate({ 'top': '0px' }, 300)
    play = setInterval(function () {
        rotateLeft()
    }, 3000)
})

JSFiddle：http://jsfiddle.net/pL03g26f/2/

无法获得滑块使用4项？

以下是HTML

CSS中的定位

我尝试过什么

1 个答案: