javascript - 如何显示下一张幻灯片和/或上一张幻灯片的某些像素？

Question

我创建了一个非常简单的旋转木马 slider ，您可以在这里查看:

http://codepen.io/anon/pen/QjgvPj

现在，如果第一张幻灯片处于事件状态，我想查看下一个列表项的一些像素，或者如果第二个列表项处于事件状态，我想查看上一张幻灯片的一些像素。

所以这看起来像这样，如果您在第一张幻灯片上:

右边的红色条代表下一张幻灯片的一些像素

如果您在幻灯片中间的某个位置，您将在左右两侧看到下一张和上一张幻灯片:

每侧的两个红色条代表上一张和下一张幻灯片

我的基本设置是: HTML:

<div class="inner">
    <ul>
      <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>Spring Mountains</span></div>
          </div>
        </a>
      </li>
       <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>I Took this Yosemite</span></div>
          </div>
        </a>
      </li>
       <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>I Took El Capitan</span></div>
          </div>
        </a>
      </li>
      <li>
        <a href="">
          <div>
            <img src="http://www.placehold.it/1000x420">
            <div><span>Fourth</span></div>
          </div>
        </a>
      </li>
    </ul>  
  </div>

我如何实现这一目标？ 我期待着你的回答。 提前谢谢你。

更新: 这次是彩色照片!

http://codepen.io/anon/pen/QjgvPj

Answer 1

http://codepen.io/anon/pen/BoZZGQ

我为选定的 li 添加一个类，以更改 z-index 属性并定义谁与另一个重叠。

javascript:

  var current = $('#carousel ul li').get(index);
  current.classList.add('active');
  if(lastOne)
    lastOne.classList.remove('active');
  lastOne = current;

CSS:

#carousel ul li{
  z-index: 1;
}
#carousel ul li.active{
  z-index: 0;
}

添加负边距以获得重叠:

#carousel ul li{
  margin-right: -50px
}

并更新偏移量: $('#carousel ul').animate({'margin-left': '-' + index*950});