三种常见jQuery幻灯片(jQuery slider)制作教程

好久没正儿八经的写写js代码了,再不写就生疏了,昨天无意中发现cityhouse的首页幻灯片有问题,于是今天就写了三个幻灯片实例,如果还不会用jquery写幻灯片的可以参考我之前的文章:《CSS+jQuery实现滑动幻灯片实例详解》以及两个jQuery幻灯片实例

今天的三个jQuery幻灯片其实还是两个,只不过第一种滚动的幻灯片有两种形式:分别是上下滚动和左右滚动。兼容IE6+,FF,chrome等主流浏览器。
效果和淘宝首页的幻灯片效果相同,自动播放时是一直往一个方向前进。
布局方面还算比较简洁,大家可以根据自己的需要添加内容,另外这次的幻灯片加上了文字,其实不光图片可以slider,文字也可以slider一会的。另外加了一点CSS3,就是控制按钮圆角化了(FF3.6+和chrome下有效果)。

截图

三种常见jQuery幻灯片(jQuery slider)实例

教程

可以研究其中的代码,原来与之前的文章教程类似:《CSS+jQuery实现滑动幻灯片实例详解

实例

查看幻灯片演示