必优博客

最近的jQuery插件开始流行走简单实用路线，上期在[jQuery插件Simple Slider简单的图片滑动效果]一文中介绍一个简单图片滑动插件，这里再介绍一个简单的图片切换插件，既然插件也开始简单化，那biuuu的介绍也就简单点，图片切换就是一张一张图片展示中间的过渡效果，这应该简单了，那这个插件的使用相对来说有点不同，图片的来源是在javascript代码部分[也就是HTML元素简单化]，那这就非常适合做ajax取数据的图片功能，效果图如下[动态切换的效果怎么可能看到到，看看图片而且]：

点我查看Simple Transition在线实例

使用说明
需要使用jQuery库文件和Simple Transition库文件
必优推荐级别：★★★

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.transitions.js"></script>

二，HTML部分

1. <div id="biuuu" ></div>

三，Javascript部分

1. <script type="text/javascript">
2. jQuery('document').ready(
3. function(){
4. jQuery('#biuuu').transition({
5. duration : 1500,
6. images : ['img1.png', 'img2.png', 'img3.png'],
7. type : 'fade'
8. });
9. }
10. );
11. </script>

Simple Transition参数说明如下：
duration表示图片显示时间
images表示图片数据源
type表示图片切换类型

如上实例，Simple Transition插件只需要定义一个空的DIV层，因为其图片URL定义在Javascript部分，如下：

1. images : ['img1.png', 'img2.png', 'img3.png'],

也就是完全可以通过ajax取图片数据，实现简单的图片切换效果。

Simple Transition插件有三种效果，fade、 tinker或leave blank

使用jQuery插件Simple Transition实现简单图片切换，biuuu认为最大的特点是可以与ajax结合，可获取大量图片数据，使用Simple Transition插件将非常实用和简单。

往期相关
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件ImageFlyout弹出图片实现javascript放大图片功能
jQuery插件simplyScroll简单卷动实现水平或垂直卷动动画效果
jQuery插件Obfuscate Image实现图片遮罩隐藏效果及原理分析
jQuery插件jbgallery实现全页展示图片并自定义类似flash插放
如何使用jQuery旋转图片插件jCarousel实现多图切换展示效果
jQuery插件Simple Controls Gallery简单控制图片库
jQuery插件Simple Slider简单的图片滑动效果