无法获得滑块使用4项？

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

您可以通过分别为位置定义 left、right、front 和 back 等类来简化旋转代码，并根据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/