JQuery图片轮换插件,支持可视化自定义配置,零CSS,更新至V1.3

名称: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! 

评论

18 楼 tiantianzzz 2011-11-02  

waterenjoy 写道

如果要改成图片拉伸为固定大小，可以修改《jquery.d.imagechange.js》（第129行）代码，修改后如下（红色为增加的代码）：
//初始化图片 文字 按钮
var a = $('<a />').append($("<img />")
.width(_w)
.height(_h)
.attr("src", n.src)
).appendTo(_imgArea)
  .width(_w)
  .height(_h)
  .attr('href',n.href?n.href:'')
  .attr('target',n.target?n.target:'')
  .css('display','block')
//.css('background-image','url('+n.src+')')
//.css('background-repeat',config.repeat)
  .css('display','block')
  .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');

感谢这位兄弟提供解决办法, 呵呵, 我是太懒了, 总是舍不得拿出时间来继续更新这个东西, 本来最初就是一个练习作品.

17 楼 waterenjoy 2011-10-27  

如果要改成图片拉伸为固定大小，可以修改《jquery.d.imagechange.js》（第129行）代码，修改后如下（红色为增加的代码）：
//初始化图片 文字 按钮
var a = $('<a />').append($("<img />")
.width(_w)
.height(_h)
.attr("src", n.src)
).appendTo(_imgArea)
  .width(_w)
  .height(_h)
  .attr('href',n.href?n.href:'')
  .attr('target',n.target?n.target:'')
  .css('display','block')
//.css('background-image','url('+n.src+')')
//.css('background-repeat',config.repeat)
  .css('display','block')
  .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');

16 楼 waterenjoy 2011-10-27  

good， 做得很棒， 如果会代码的话，把代码稍微改下，就可以使用IMG了。
我是这样该的:
源代码：

// 初始化图片 文字 按钮
$.each(config.data,function(i,n){
var a = $('<a />').append($("<img />")
.width(_w)
.height(_h)
.attr("src", n.src)
).appendTo(_imgArea)
.width(_w)
.height(_h)
.attr('href',n.href?n.href:'')
.attr('target',n.target?n.target:'')
.css('display','block')
.css('background-image','url('+n.src+')')
.css('background-repeat',config.repeat)
.css('display','block')
.css('float','x,showx'.indexOf(config.animateStyle)!=-1?'left':'');[/align]

15 楼 damoqiongqiu 2011-06-30  

如何能把图片拉伸到能适应外层DIV的大小呢？
或者能把图片居中也行，
外层DIV比图片略大的时候图片缩在左上角，
请楼主指教。

14 楼 damoqiongqiu 2011-06-30  

不错，下载来试试，不过在线演示的地址貌似已经爆掉了。

13 楼 tiantianzzz 2010-09-13  

考虑到强制拉伸图片会显得非常难看, 所以故意没有使用img标签, 仅适用于固定大小图片的地方.

12 楼 zombre 2010-09-13  

还是那个问题，就是，图片不能用代码随意控制大小的问题！请问楼主，在那个jquery.d.imagechange.js中有控制图片大小的地方吗？

11 楼 nick216 2010-09-02  

简单看了一下

真是很好用哦

多谢多谢

10 楼 robot2008 2010-08-16  

多谢楼主.

9 楼 Amon 2010-08-07  

很完美的例子。但是和prototype.js的冲突不好解决。

8 楼 sxlkk 2010-07-14  

这个插件有个致命的bug，就是图片是按照来尺寸显示的，假如展示一个很大的图片，它只能看到图片的一个角，如果展示很小的图片，那个图片会按照原大小在区域中展示，占不满图片展示区域的

7 楼 sheva.wen 2009-10-24  

不错啊
但还是应该保持HTML文档结构的完整性，不然禁用脚本的浏览器用户没的看啊。

6 楼 tiantianzzz 2009-10-23  

写的时候一直在本地测,用的本地图片,所以没发现这个问题....IE6下确实有这个问题 恩,...也只有IE6了 ...找找原因~

5 楼 esteem 2009-10-23  

firefox下面是没问题的。。。

4 楼 esteem 2009-10-23  

我浏览器下面的状态栏一直在刷。。。

3 楼 naily 2009-10-23  

浏览器一直在刷？
怎么看的呢

2 楼 esteem 2009-10-23  

这个一直在请求图片哈  浏览器一直在刷。。。

1 楼 naily 2009-10-23  

很好，给前台开发带来不少方便之处！