Question

我创建了一个非常简单的旋转木马滑块，你可以在这里查看：

现在我想看到下一个列表项的一些像素，如果第一张幻灯片处于活动状态，或者如果第二个列表项处于活动状态，我想看到前一张列表中的一些像素。

所以如果您在第一张幻灯片中，这将看起来像这样：

右侧的红色条表示下一张幻灯片的部分像素

如果你在幻灯片中间的某个地方，你会看到下一张和上一张幻灯片左右：

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

我的基本设置是： 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属性并定义与另一个重叠的人。

javascirpt：

  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});

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

1 个答案: