JQuery图片轮换插件,支持可视化自定义配置,零CSS

所有效果演示地址:

http://jquery-demo-d.appspot.com/demo/jquery.d.imagechange/jquery.d.imagechange.html

可视化编辑器演示:

http://jquery-demo-d.appspot.com/demo/jquery.d.imagechange/jquery.d.imagechange_editor.html

下载地址:

http://code.google.com/p/jquery-plugin-d/downloads/list

功能:

1.多种轮换效果

2.可视化自定义配置

3.即使完全不会JS,CSS的人,也可以配置出量身订做的效果

用法:

1.首先我们需要一个div,并加上id方便定位(未避免页面加载完成之前所带来的空白,您可以先在div里面加入你想要的效果,比如loading )

Html代码

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

<div id="pic"></div>

2.然后在JS里定义一个数组,组织你的数据,如下

1. var _data = [  
2.      {title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.baidu.com',target:'_blank'},  
3.      {title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'},  
4.      {title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'}  
5. ];  

var _data = [ {title:'李彦宏',desc:'立刻加入我们,获取百度之星荣誉称号',src:'img/1.jpg',href:'http://www.baidu.com',target:'_blank'}, {title:'马云',desc:'立刻加入我们,获取TOP大赛巨额奖项',src:'img/2.jpg'}, {title:'路飞',desc:'立刻加入我们,寻找伟大航路的宝藏',src:'img/3.jpg'} ];

其中src为图片地址,请务必提供,其他参数相信我们都很清楚,我就不说啦

3.接下来可以动手渲染了

Js代码

1. $(document).ready(function(){  
2.      $('#pic').d_imagechange({  
3.          data:_data  
4.      });  
5. });  

$(document).ready(function(){ $('#pic').d_imagechange({ data:_data }); });

其中{data:_data}为传入的option参数,此参数可以由可视化编辑器生成,所以在此我就不提供API了,有兴趣可以看编辑器源码或者JS源码(发现有个注释没有改,╮(╯_╰)╭,不想重新传了...请54吧.....).

最后   Enjoy!