名称:D.ImageChange 图片轮换插件
作者:D.夏亦知非
日期:2009-10-19
版本:V1.3@2010-03-16
JQ版本:1.3.2+ (建议使用1.4以上版本)
更新说明:
v1.1:增加清空原始内容功能,以免页面加载完成之前显示大片空白
v1.2:修正IE6每次从服务器读取背景图片的BUG
v1.3:修正宽度过大产生滚动条的BUG,经测试,兼容JQ1.4版本 (在线演示地址没有更新, 请直接下载使用)
所有效果演示地址:
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 )
<div id="pic"></div>
2.然后在JS里定义一个数组,组织你的数据,如下
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.接下来可以动手渲染了
$(document).ready(function(){ $('#pic').d_imagechange({ data:_data }); });
其中{data:_data}为传入的option参数,此参数可以由可视化编辑器生成,所以在此我就不提供API了,有兴趣可以看编辑器源码或者JS源码(发现有个注释没有改,╮(╯_╰)╭,不想重新传了...请54吧.....).
几个参数说明:
最后 Enjoy!