所属分类:HTML网页，JS语言与代码
转载自http://www.im286.com/thread-5120043-1-1
功能说明：
1.可以实现一个页面多次调用
2.所播放的图片宽高可以自适应外部框架
3.可以自定义播放时间间隔
4.兼容ie6，ie7，ie8，ff
[b]插件源码[/b]
[code]/*
* jQuery插件：autoimg
* 版本：v1.1
* 时间：2010-8-31
*
+--------------------------------------------------------------------
*使用说明：
*1.本插件支持一个页面多次使用
*2.html模板如下
<div class="autoimg">
<div class="parentdiv"><img src="" /> </div>
<ul class="imglist">
<li><img src="image/1/0.jpg" /></li>
<li><img src="image/1/1.jpg" /></li>
<li><img src="image/1/2.jpg" /></li>
</ul>
<div class="clearboth"></div>
</div>
*3.参考样式[见示例：index.html]
<style type="text/css">
.parentdiv {
position:relative;
overflow:hidden;
height:300px;
width:300px;
border:1px solid #000;
float:left;
}
.imglist {
width:270px;
float:left
}
.imglist li {
width:80px;
height:80px;
overflow:hidden;
float:left;
margin:5px;
}
.imglist li img {
width:80px
}
.clearboth {
clear:both
}
</style>
+--------------------------------------------------------------------
*/
jQuery.fn.autoimg = function(G){
var interval = new Array();
var ord = new Array();
var D = {
delay:5,//幻灯片切换延时
loadingImgSrc:"loading.gif"
};
$.extend(D,G)
//初始化函数
$.init = function(el,i){
var framediv,frameimg,firstimg,i,f;
framediv = $(el).children("div").eq(0);
//frameimg = framediv.children("img");
frameimg = $("<img />");
frameimg.attr("src",D.loadingImgSrc);
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
//+--------------------------------------------------
imgMargins = $.imgCenter({"w": framediv.width() ,"h":framediv.height()},{"w":64,"h":64});
frameimg.css({width:64,height:64,marginLeft:imgMargins.l,marginTop:imgMargins.t})
framediv.html(frameimg);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:firstimg});
$.imgSlide(el,i);
}
//自动播放切换图片列表
$.imgSlide = function(el,i){
ord[i] = 0;
interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
}
$.interval = function(el,i,j){
var framediv,frameimg,firstimg;
var imgSrc,imgLength,i;
framediv = $(el).children("div");
frameimg = framediv.children("img");
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
imgLength = imgwrap.size();
if(j>=imgLength){j=0};
if(j < imgLength){
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:imgwrap.find("img").eq(j)});
}
if(j<imgLength){
ord[i]=j+1;
}else{ord[i]=0;};
}
//图片预加载
jQuery.fn.loadthumb = function(D) {
var imgTmp,imgDem,imgMargins;
D = $.extend({
parentDiv : {},
img:{},
frameimg : {}
},D);
D.frameimg.hide();
imgTmp = new Image();
$(imgTmp).load(function(){
imgDem = {};
imgDem.w = imgTmp.width;
imgDem.h = imgTmp.height;
imgDem = $.imgResize({"w":D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
imgMargins = $.imgCenter({"w": D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
D.frameimg.css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t})
.attr("src",D.img.attr("src"))
.fadeIn("slow");
}).attr("src",D.img.attr("src"));//.attr("src",options.src)要放在load后面，
}
//重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
jQuery.imgResize = function(parentDem,imgDem){
if(imgDem.w>0 && imgDem.h>0){
var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
//如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
if(rate <= 1){
imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
}else{// 如果比例数大于1，则新的宽度等于以前的宽度。
imgDem.w = imgDem.w;
}
if(rate <= 1){
imgDem.h = imgDem.h*rate;
}
else{
imgDem.h = imgDem.h;
}
}
return imgDem;
}
//使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
jQuery.imgCenter = function(parentDem,imgDem){
var left = (parentDem.w - imgDem.w)*0.5;
var top = (parentDem.h - imgDem.h)*0.5;
return { "l": left , "t": top};
}
//图片列表鼠标悬停效果
jQuery.imgHover = function(el,i){
var framediv,frameimg,firstimg;
var imgSrc,imgLength,i;
framediv = $(el).children("div");
frameimg = framediv.children("img");
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
$(el).children("ul").children("li").hover(
function(){
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:$(this).find("img")}) ;
clearInterval(interval[i]);
},function(){
ord[i] = $(el).children("ul").children("li").index($(this))+1;
interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
});
}
$(this).each(function(i){
$.init(this,i);
$.imgHover(this,i);
});
};[/code]
在线演示地址：[/b]
[url=http://www.ffasp.com/plugs/autoimg/:1xxtk1nz]http://www.ffasp.com/plugs/autoimg/[/url:1xxtk1nz]
rayfile免费空间下载地址[含演示]：
[url=http://www.rayfile.com/zh-cn/files/4c8ce1a1-c240-11df-bd3e-0015c55db73d/:1xxtk1nz]http://www.rayfile.com/zh-cn/fil ... -bd3e-0015c55db73d/[/url:1xxtk1nz]
功能说明：
1.可以实现一个页面多次调用
2.所播放的图片宽高可以自适应外部框架
3.可以自定义播放时间间隔
4.兼容ie6，ie7，ie8，ff
[b]插件源码[/b]
[code]/*
* jQuery插件：autoimg
* 版本：v1.1
* 时间：2010-8-31
*
+--------------------------------------------------------------------
*使用说明：
*1.本插件支持一个页面多次使用
*2.html模板如下
<div class="autoimg">
<div class="parentdiv"><img src="" /> </div>
<ul class="imglist">
<li><img src="image/1/0.jpg" /></li>
<li><img src="image/1/1.jpg" /></li>
<li><img src="image/1/2.jpg" /></li>
</ul>
<div class="clearboth"></div>
</div>
*3.参考样式[见示例：index.html]
<style type="text/css">
.parentdiv {
position:relative;
overflow:hidden;
height:300px;
width:300px;
border:1px solid #000;
float:left;
}
.imglist {
width:270px;
float:left
}
.imglist li {
width:80px;
height:80px;
overflow:hidden;
float:left;
margin:5px;
}
.imglist li img {
width:80px
}
.clearboth {
clear:both
}
</style>
+--------------------------------------------------------------------
*/
jQuery.fn.autoimg = function(G){
var interval = new Array();
var ord = new Array();
var D = {
delay:5,//幻灯片切换延时
loadingImgSrc:"loading.gif"
};
$.extend(D,G)
//初始化函数
$.init = function(el,i){
var framediv,frameimg,firstimg,i,f;
framediv = $(el).children("div").eq(0);
//frameimg = framediv.children("img");
frameimg = $("<img />");
frameimg.attr("src",D.loadingImgSrc);
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
//+--------------------------------------------------
imgMargins = $.imgCenter({"w": framediv.width() ,"h":framediv.height()},{"w":64,"h":64});
frameimg.css({width:64,height:64,marginLeft:imgMargins.l,marginTop:imgMargins.t})
framediv.html(frameimg);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:firstimg});
$.imgSlide(el,i);
}
//自动播放切换图片列表
$.imgSlide = function(el,i){
ord[i] = 0;
interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
}
$.interval = function(el,i,j){
var framediv,frameimg,firstimg;
var imgSrc,imgLength,i;
framediv = $(el).children("div");
frameimg = framediv.children("img");
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
imgLength = imgwrap.size();
if(j>=imgLength){j=0};
if(j < imgLength){
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:imgwrap.find("img").eq(j)});
}
if(j<imgLength){
ord[i]=j+1;
}else{ord[i]=0;};
}
//图片预加载
jQuery.fn.loadthumb = function(D) {
var imgTmp,imgDem,imgMargins;
D = $.extend({
parentDiv : {},
img:{},
frameimg : {}
},D);
D.frameimg.hide();
imgTmp = new Image();
$(imgTmp).load(function(){
imgDem = {};
imgDem.w = imgTmp.width;
imgDem.h = imgTmp.height;
imgDem = $.imgResize({"w":D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
imgMargins = $.imgCenter({"w": D.parentDiv.width() ,"h": D.parentDiv.height()},{"w":imgDem.w,"h":imgDem.h});
D.frameimg.css({width:imgDem.w,height:imgDem.h,marginLeft:imgMargins.l,marginTop:imgMargins.t})
.attr("src",D.img.attr("src"))
.fadeIn("slow");
}).attr("src",D.img.attr("src"));//.attr("src",options.src)要放在load后面，
}
//重置图片宽度，高度插件 ( parentDem是父元素，imgDem是图片 )
jQuery.imgResize = function(parentDem,imgDem){
if(imgDem.w>0 && imgDem.h>0){
var rate = (parentDem.w/imgDem.w < parentDem.h/imgDem.h)?parentDem.w/imgDem.w:parentDem.h/imgDem.h;
//如果 指定高度/图片高度 小于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定高度/图片高度。
//如果 指定高度/图片高度 大于 指定宽度/图片宽度 ， 那么，我们的比例数 取 指定宽度/图片宽度。
if(rate <= 1){
imgDem.w = imgDem.w*rate; //图片新的宽度 = 宽度 * 比例数
}else{// 如果比例数大于1，则新的宽度等于以前的宽度。
imgDem.w = imgDem.w;
}
if(rate <= 1){
imgDem.h = imgDem.h*rate;
}
else{
imgDem.h = imgDem.h;
}
}
return imgDem;
}
//使图片在父元素内水平，垂直居中，( parentDem是父元素，imgDem是图片 )
jQuery.imgCenter = function(parentDem,imgDem){
var left = (parentDem.w - imgDem.w)*0.5;
var top = (parentDem.h - imgDem.h)*0.5;
return { "l": left , "t": top};
}
//图片列表鼠标悬停效果
jQuery.imgHover = function(el,i){
var framediv,frameimg,firstimg;
var imgSrc,imgLength,i;
framediv = $(el).children("div");
frameimg = framediv.children("img");
firstimg = $(el).children("ul").find("img").eq(0);
imgwrap = $(el).children("ul").children("li");
$(el).children("ul").children("li").hover(
function(){
framediv.loadthumb({parentDiv:framediv,frameimg:frameimg,img:$(this).find("img")}) ;
clearInterval(interval[i]);
},function(){
ord[i] = $(el).children("ul").children("li").index($(this))+1;
interval[i] = setInterval(function(){$.interval(el,i,ord[i])},D.delay*1000);
});
}
$(this).each(function(i){
$.init(this,i);
$.imgHover(this,i);
});
};[/code]
在线演示地址：[/b]
[url=http://www.ffasp.com/plugs/autoimg/:1xxtk1nz]http://www.ffasp.com/plugs/autoimg/[/url:1xxtk1nz]
rayfile免费空间下载地址[含演示]：
[url=http://www.rayfile.com/zh-cn/files/4c8ce1a1-c240-11df-bd3e-0015c55db73d/:1xxtk1nz]http://www.rayfile.com/zh-cn/fil ... -bd3e-0015c55db73d/[/url:1xxtk1nz]