在网站中设计图像幻灯片

时间:2012-11-16 09:57:12

标签: javascript jquery html css html5

我想在我的网站上设计图像幻灯片,其功能类似于http://wearehunted.com/a/#/emerging/中的功能。但是我不会像参考网站那样有小图像。相反,我只有一个完整的图像占据整个屏幕。

任何人都可以帮助我如何实现这一点。这可以只用CSS + html完成,或者我需要使用jquery或javascript以及html和css。

2 个答案:

答案 0 :(得分:1)

对于全屏幻灯片,我使用:http://vegas.jaysalvat.com/

使用大量选项非常简单,并且还有覆盖图使拉伸图像看起来很漂亮。

答案 1 :(得分:1)

仅使用css和html,您将无法执行幻灯片放映等任何操作。

如果你想保持它非常简单和轻便(没有库等),你可以简单地用javascript检查你的光标是在左边界还是右边界附近。如果它比某个值更近,则调用一个将图片滑动到询问方向的函数(通过增加/减少left:variable%;来改变它的绝对位置)

这是一个你可以信赖的非常粗俗的小提琴http://jsfiddle.net/6VdL7/ 在我的例子中,我只检查左侧,并且不检查图片是否在右侧结束。此外,我只实施了mousemove

希望这有助于您到达目的地。