jquery插件，图片预加载,自适应宽高的图片slide,autoimgv1.1
* jQuery插件：autoimg
* 版本：v1.1
* 时间：2010-9-17
* 作者：飞飞
功能说明：
1.可以实现一个页面多次调用
2.所播放的图片宽高可以自适应外部框架
3.可以自定义播放时间间隔
查看示例：
http://www.ffasp.com/plugs/autoimg/
插件代码
代码
1 /*
2 * jQuery插件：autoimg
3 * 版本：v1.1
4 * 时间：2010-8-31
5 * 作者：飞飞
6 * QQ：276230416
7 * 网址：http://www.ffasp.com
8 *
9 +--------------------------------------------------------------------
10 *使用说明：
11 *1.本插件支持一个页面多次使用
12 *2.html模板如下
13 <div class="autoimg">
14 <div class="parentdiv"><img src="" /> </div>
15 <ul class="imglist">
16 <li><img src="image/1/0.jpg" /></li>
17 <li><img src="image/1/1.jpg" /></li>
18 <li><img src="image/1/2.jpg" /></li>
19 </ul>
20 <div class="clearboth"></div>
21 </div>
22 *3.参考样式[见示例：index.html]
23 <style type="text/css">
24 .parentdiv {
25 position:relative;
26 overflow:hidden;
27 height:300px;
28 width:300px;
29 border:1px solid #000;
30 float:left;
31 }
32 .imglist {
33 width:270px;
34 float:left
35 }
36 .imglist li {
37 width:80px;
38 height:80px;
39 overflow:hidden;
40 float:left;
41 margin:5px;
42 }
43 .imglist li img {
44 width:80px
45 }
46 .clearboth {
47 clear:both
48 }
49 </style>
50 +--------------------------------------------------------------------
51 */
52 jQuery.fn.autoimg = function(G){
53
54 var interval = new Array();
55 var ord = new Array();
56 var D = {
57 delay:5,//幻灯片切换延时
58 loadingImgSrc:"loading.gif"
59 };
60 $.extend(D,G)
61
62 //初始化函数
63 $.init = function(el,i){
64 var framediv,frameimg,firstimg,i,f;
65 framediv = $(el).children("div").eq(0);
66 //frameimg = framediv.children("img");
67 frameimg = $("<img />");
68 frameimg.attr("src",D.loadingImgSrc);
69 firstimg = $(el).children("ul").find("img").eq(0);
70 imgwrap = $(el).children("ul").children("li");
71 //+--------------------------------------------------
72 imgMargins = $.imgCenter({"w": framediv.width() ,"h":framediv.height()},{"w":64,"h":64});
73 frameimg.css({width:64,height:64,marginLeft:imgMargins.l,marginTop:imgMargins.t})
74 framediv.html(frameimg);
75 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
76 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:firstimg});
77 $.imgSlide(el,i);
78 }
79 //自动播放切换图片列表
80 $.imgSlide = function(el,i){
81 ord[i] = 0;
82 interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
83 }
84
85 $.interval = function(el,i,j){
86 var framediv,frameimg,firstimg;
87 var imgSrc,imgLength,i;
88
89 framediv = $(el).children("div");
90 frameimg = framediv.children("img");
91 firstimg = $(el).children("ul").find("img").eq(0);
92 imgwrap = $(el).children("ul").children("li");
93
94 imgLength = imgwrap.size();
95 if(j>=imgLength){j=0};
96 if(j < imgLength){
97 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:imgwrap.find("img").eq(j)});
98 }
99 if(j<imgLength){
100 ord[i]=j+1;
101 }else{ord[i]=0;};
102 }
103 //图片预加载
104 jQuery.fn.loadthumb = function(D) {
105 var imgTmp,imgDem,imgMargins;
106 D = $.extend({
107 parentDiv : {},
108 img:{},
109 frameimg : {}
110 },D);
111 D.frameimg.hide();
112 imgTmp = new Image();
113 $(imgTmp).load(function(){
114 imgDem = {};
115 imgDem.w = imgTmp.width;
116 imgDem.h = imgTmp.height;
117 imgDem = $.imgResize({"w":D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
118 imgMargins = $.imgCenter({"w": D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
119 D.frameimg.css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t})
120 .attr("src",D.img.attr("src"))
121 .fadeIn("slow");
122 }).attr("src",D.img.attr("src"));//.attr("src",options.src)要放在load后面，
123
124 }
125
126 //重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
127 jQuery.imgResize = function(parentDem,imgDem){
128 if(imgDem.w>0 && imgDem.h>0){
129 var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
130 //如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
131 //如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
132 if(rate <= 1){
133 imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
134 }else{// 如果比例数大于1，则新的宽度等于以前的宽度。
135 imgDem.w = imgDem.w;
136 }
137 if(rate <= 1){
138 imgDem.h = imgDem.h*rate;
139 }
140 else{
141 imgDem.h = imgDem.h;
142 }
143 }
144 return imgDem;
145 }
146 //使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
147 jQuery.imgCenter = function(parentDem,imgDem){
148 var left = (parentDem.w - imgDem.w)*0.5;
149 var top = (parentDem.h - imgDem.h)*0.5;
150 return { "l": left , "t": top};
151 }
152 //图片列表鼠标悬停效果
153 jQuery.imgHover = function(el,i){
154 var framediv,frameimg,firstimg;
155 var imgSrc,imgLength,i;
156
157 framediv = $(el).children("div");
158 frameimg = framediv.children("img");
159 firstimg = $(el).children("ul").find("img").eq(0);
160 imgwrap = $(el).children("ul").children("li");
161
162 $(el).children("ul").children("li").hover(
163 function(){
164 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:$(this).find("img")}) ;
165 clearInterval(interval[i]);
166 },function(){
167 ord[i] = $(el).children("ul").children("li").index($(this))+1;
168 interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
169 });
170 }
171
172 $(this).each(function(i){
173 $.init(this,i);
174 $.imgHover(this,i);
175 });
176 };
2 * jQuery插件：autoimg
3 * 版本：v1.1
4 * 时间：2010-8-31
5 * 作者：飞飞
6 * QQ：276230416
7 * 网址：http://www.ffasp.com
8 *
9 +--------------------------------------------------------------------
10 *使用说明：
11 *1.本插件支持一个页面多次使用
12 *2.html模板如下
13 <div class="autoimg">
14 <div class="parentdiv"><img src="" /> </div>
15 <ul class="imglist">
16 <li><img src="image/1/0.jpg" /></li>
17 <li><img src="image/1/1.jpg" /></li>
18 <li><img src="image/1/2.jpg" /></li>
19 </ul>
20 <div class="clearboth"></div>
21 </div>
22 *3.参考样式[见示例：index.html]
23 <style type="text/css">
24 .parentdiv {
25 position:relative;
26 overflow:hidden;
27 height:300px;
28 width:300px;
29 border:1px solid #000;
30 float:left;
31 }
32 .imglist {
33 width:270px;
34 float:left
35 }
36 .imglist li {
37 width:80px;
38 height:80px;
39 overflow:hidden;
40 float:left;
41 margin:5px;
42 }
43 .imglist li img {
44 width:80px
45 }
46 .clearboth {
47 clear:both
48 }
49 </style>
50 +--------------------------------------------------------------------
51 */
52 jQuery.fn.autoimg = function(G){
53
54 var interval = new Array();
55 var ord = new Array();
56 var D = {
57 delay:5,//幻灯片切换延时
58 loadingImgSrc:"loading.gif"
59 };
60 $.extend(D,G)
61
62 //初始化函数
63 $.init = function(el,i){
64 var framediv,frameimg,firstimg,i,f;
65 framediv = $(el).children("div").eq(0);
66 //frameimg = framediv.children("img");
67 frameimg = $("<img />");
68 frameimg.attr("src",D.loadingImgSrc);
69 firstimg = $(el).children("ul").find("img").eq(0);
70 imgwrap = $(el).children("ul").children("li");
71 //+--------------------------------------------------
72 imgMargins = $.imgCenter({"w": framediv.width() ,"h":framediv.height()},{"w":64,"h":64});
73 frameimg.css({width:64,height:64,marginLeft:imgMargins.l,marginTop:imgMargins.t})
74 framediv.html(frameimg);
75 //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
76 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:firstimg});
77 $.imgSlide(el,i);
78 }
79 //自动播放切换图片列表
80 $.imgSlide = function(el,i){
81 ord[i] = 0;
82 interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
83 }
84
85 $.interval = function(el,i,j){
86 var framediv,frameimg,firstimg;
87 var imgSrc,imgLength,i;
88
89 framediv = $(el).children("div");
90 frameimg = framediv.children("img");
91 firstimg = $(el).children("ul").find("img").eq(0);
92 imgwrap = $(el).children("ul").children("li");
93
94 imgLength = imgwrap.size();
95 if(j>=imgLength){j=0};
96 if(j < imgLength){
97 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:imgwrap.find("img").eq(j)});
98 }
99 if(j<imgLength){
100 ord[i]=j+1;
101 }else{ord[i]=0;};
102 }
103 //图片预加载
104 jQuery.fn.loadthumb = function(D) {
105 var imgTmp,imgDem,imgMargins;
106 D = $.extend({
107 parentDiv : {},
108 img:{},
109 frameimg : {}
110 },D);
111 D.frameimg.hide();
112 imgTmp = new Image();
113 $(imgTmp).load(function(){
114 imgDem = {};
115 imgDem.w = imgTmp.width;
116 imgDem.h = imgTmp.height;
117 imgDem = $.imgResize({"w":D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
118 imgMargins = $.imgCenter({"w": D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
119 D.frameimg.css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t})
120 .attr("src",D.img.attr("src"))
121 .fadeIn("slow");
122 }).attr("src",D.img.attr("src"));//.attr("src",options.src)要放在load后面，
123
124 }
125
126 //重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
127 jQuery.imgResize = function(parentDem,imgDem){
128 if(imgDem.w>0 && imgDem.h>0){
129 var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
130 //如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
131 //如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
132 if(rate <= 1){
133 imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
134 }else{// 如果比例数大于1，则新的宽度等于以前的宽度。
135 imgDem.w = imgDem.w;
136 }
137 if(rate <= 1){
138 imgDem.h = imgDem.h*rate;
139 }
140 else{
141 imgDem.h = imgDem.h;
142 }
143 }
144 return imgDem;
145 }
146 //使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
147 jQuery.imgCenter = function(parentDem,imgDem){
148 var left = (parentDem.w - imgDem.w)*0.5;
149 var top = (parentDem.h - imgDem.h)*0.5;
150 return { "l": left , "t": top};
151 }
152 //图片列表鼠标悬停效果
153 jQuery.imgHover = function(el,i){
154 var framediv,frameimg,firstimg;
155 var imgSrc,imgLength,i;
156
157 framediv = $(el).children("div");
158 frameimg = framediv.children("img");
159 firstimg = $(el).children("ul").find("img").eq(0);
160 imgwrap = $(el).children("ul").children("li");
161
162 $(el).children("ul").children("li").hover(
163 function(){
164 framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:$(this).find("img")}) ;
165 clearInterval(interval[i]);
166 },function(){
167 ord[i] = $(el).children("ul").children("li").index($(this))+1;
168 interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
169 });
170 }
171
172 $(this).each(function(i){
173 $.init(this,i);
174 $.imgHover(this,i);
175 });
176 };
