带导航覆盖的简单幻灯片

时间:2012-04-30 23:24:07

标签: php css navigation slideshow

我目前正在重新设计我的投资组合网站&我想使用最好的非flash方法来创建我的布局中显示的以下幻灯片:

http://oi49.tinypic.com/xeifeq.jpg

我在节目中只有3张幻灯片,我想覆盖左/右导航按钮,如图所示。

那我该怎么做呢?

2 个答案:

答案 0 :(得分:0)

虽然您可以使用纯CSS解决方案,但您可以通过使用javascript为幻灯片显示动画来获得更好的浏览器支持。

大约有十亿个javascript插件可以帮到你,但这里有一个很好的插件 - http://css-tricks.com/examples/AnythingSlider/

您可以调整大多数插件的CSS以获得您想要的重叠箭头效果。我将使用的方法是将幻灯片放映的容器设置为position:relative,然后将箭头设置为position:absolute ...所以例如现在可以使用top来定位左箭头:50%left:0

祝你好运!

答案 1 :(得分:0)

有很多选择。使用像jQuery这样的javascript库,可以轻松完成许多需要flash一次的动画。

尝试google搜索,jQuery Sliders