Question

我目前正在编写jQuery幻灯片效果，需要一些帮助。我所有的sideshow功能都正常工作，我唯一的问题是我想让我的导航箭头自动定位在幻灯片显示框的两侧（960px，以屏幕为中心）。

最终产品应该像Kriesi在这里做的那样：http://www.kriesi.at/themes/upscale/

我看过他的代码，但无法弄明白。任何帮助将不胜感激！

谢谢！

Answer 1

箭头位于。该块定位为绝对值，最高值为50％ - 12px（margin-top：-12px）;

然后，有一个列表，其中包含图像和其他数据，并影响其父级的高度。

所以，基本上，在代码中，当用户点击箭头时，jQUery probabaly使用outerHeight（）来获取li元素的高度，然后使用animate（）来改变影响高度的高度。它会顺利地改变箭头的位置。

就个人而言，我认为当箭头改变它的位置时，这是一个糟糕的设计。每当你想看到下一张幻灯片时，你必须上下移动鼠标，这非常烦人。

Answer 2

我不明白你的意思“我无法弄清楚如何将它们放在幻灯片上...如果我在CSS中这样做，那么它将不适用于所有屏幕分辨率。” ...？

如果您将箭头相对于幻灯片放置，则不会出现问题。例如，要将它们放在左上角和右上角，请在样式中包含以下内容：

#slideshowcontainer{
   width: 960px; 
   height: 400px;
   position: relative;
}
#leftarrow{
   position: absolute;
   top: 0px;
   left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
   position: absolute;
   top: 0px;
   right: -40px; /* position the arrow 40px to the right of the slideshow */
}

显然，您需要调整值以适应，具体取决于箭头的大小和您想要的位置等。

在幻灯片上自动定位箭头

2 个答案: