jQuery插件Slideshow幻灯片实现图片、文字和链接PPT演示轮播效果

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=372

经常使用javascript制作PPT幻灯片播放效果，实现的方法非常多，但一般比较麻烦，这里的jQuery插件slideshow(幻灯片)允许你创建动态的，可控制的幻灯片或演示效果，除可轮播图片外，还可以播放文字、链接，使用非常方便，Slideshow幻灯片插件只需要几行代码轻松实现图片、文字和链接PPT演示轮播效果。

使用说明：
一，需要使用jQuery 1.2以上库文件和slideshow库文件
jQuery下载[点我下载jQuery库文件]
slideshow下载[点我下载slideshow库文件]

二，兼容浏览器Opera、Firefox、Chrome、Safari和Internet

实例代码：
一，包含文件部分(一个CSS样式文件和二个JS文件)

1. <link href="js/jquery.aslideshow/simple/styles.css" media="screen" rel="stylesheet" type="text/css" />
2. <script type="text/javascript" src="js/jquery.js"></script>
3. <script type="text/javascript" src="js/jquery.aslideshow.js"></script>

二，HTML部分(幻灯片演示图片、文字或链接)

1. <div id="MySlideshow">
2. <p>必优博客www.biuuu.com欢迎你</p>
3. <img src="images/biuuu_0.jpg" alt="必优图片1"/>
4. <img src="images/biuuu_1.jpg" alt="必优图片2"/>
5. <p><label>必优博客</label>技术源于实践，实践必然优秀！</p>
6. <a href="images/biuuu_2.jpg">必优图片3</a>
7. <a href="http://www.biuuu.com/">必优博客</a>
8. <a href="http://www.biuuu.com/?page_id=167">关于必优博客</a>
9. </div>

三，javascript部分(jquery slideshow)

1. <script type="text/javascript">
2. $(document).ready(function(){
3. $('#MySlideshow').slideshow();
4. });
5. </script>

实例效果图：

实例代码分析如下：
1，Slideshow幻灯片插件支持的HTML页面元素
(1)演示文字方法，如：

<p>必优博客www.biuuu.com欢迎你</p>

注意：可使用label设置文字标题，如:

<p><label>必优博客</label>技术源于实践，实践必然优秀！</p>

(2)演示图片方法，如：

<img src="images/biuuu_0.jpg" alt="必优图片1"/>

(3)演示链接方法，如：

<a href="http://www.biuuu.com/">必优博客</a>

2，可控制幻灯片播放，控制按钮分别是：开始，停止，上一张，下一张，第一张与最后一张

3，显示当前幻灯片的数量与播放的页数

4，标题定义
(1)图片标题使用alt属性，如：

<img src="images/biuuu_0.jpg" alt="必优图片1"/>

(2)链接标题使用title属性，如：

<a href="http://www.biuuu.com/?page_id=167">关于必优博客</a>

(3)其它文本使用label属性，如：

<p><label>必优博客</label>技术源于实践，实践必然优秀！</p>

四，自定义配置
(1)width:320  定义宽度px
(2)height:240 定义高度px
(3)index:0    元素层叠级别
(4)time:3000  元素显示之间的时间差
(5)title:true 是否显示标题
(6)panel:true 是否显示控制面板
(7)play:false 是否自动播放
(8)loop:true  是否loop
(9)effect:'fade' 设置fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY效果
(10)effecttime:1000 设置快、慢，正常所有有效的速度fx值
(11)filter:true     过滤<br/>, 空<div>, <p>等
(12)nextclick:false 是否绑定下一张按钮
(13)playclick:false  是否绑定开始/暂停
(14)playhover:false  是否绑定开始/暂停悬停
(15)playhoverr:false 是否绑定开始/暂停悬停
(16)playframe:true  是否显示播放
(17)imgresize:false 重新调整图片大小
(18)imgcenter:true  设置图片居中
(19)imgajax:true    加载远程图片
(20)linkajax:false  加载远程链接
(21)help:''         帮助链接
(22)controls 组件

1. 'hide':true,   是否隐藏
2. 'first':true,  是否显示第一张按钮
3. 'prev':true,   是否显示上一张按钮
4. 'play':true,   是否显示播放按钮
5. 'next':true,   是否显示下一张按钮
6. 'last':true,   是否显示最后一张按钮
7. 'help':true,   是否显示帮助按钮
8. 'counter':true 是否显示统计按钮

自定义设置使用实例，接上面实例
(1)自定义高度与宽度

$('#MySlideshow').slideshow({width:600,height:400});

(2)自动播放

$('#MySlideshow').slideshow({playframe:false}).playSlide();

(3)自定义控制面板

$('#MySlideshow').slideshow({title:false,panel:false,play:true,playframe:false}).playSlide();

(4)自定义播放效果

$('#MySlideshow').slideshow({title:false,playframe:false,play:true,effect:'zoomFade'}).playSlide();

jQuery插件Slideshow幻灯片实现图片、文字和链接PPT演示轮播效果使用非常简单，其效果丰富，扩展性也非常强，实际应用中如新闻轮播，图片轮播，链接轮播等效果，值得推荐。

点我下载jQuery插件Slideshow幻灯片

点我下载本文jQuery插件Slideshow幻灯片演示DEMO