(function($){
$.extend($.fn,{
divInit:function(options){
options=$.extend({
picWidth : 500,//图片默认宽度
picHeight: 250,//图片默认高度
picCount : 5,//默认图片个数
picInterval : 5000//默认隔多长时间轮换下一张图片
},options);
//在此对象的基础上添加图片div
var $parentDiv = $("<div>");
var width = options.picWidth;
var height = options.picHeight;
var count = options.picCount;
$parentDiv.css("width",width+"px")
.css("height",height+"px")
.css("overflow","hidden")
.css("position","relative")
.css("border","1px solid #000");
//图片div
var $imageTotalDiv = $("<div>");
$imageTotalDiv.css("width",(width*5+count*10)+"px")
.attr("name","imageDiv")
.css("height",height+"px")
.css("position","absolute")
.css("left","0");
for(var i=0;i<count;i++){
var imgSrc = options==undefined?"":options.imgs[i];
//每一张图片所在div
var $perImgDiv = $("<div>");
$perImgDiv.css("width",(width+10)+"px")
.css("height",height+"px")
.css("float","left");
var $perImg = $("<img>");
$perImg.css("width",width+"px")
.css("height",height+"px")
.attr("alt","图片"+i)
.attr("src",imgSrc);
$perImgDiv.append($perImg);
$imageTotalDiv.append($perImgDiv);
}
$parentDiv.append($imageTotalDiv);
this.append($parentDiv);
this.picInterval(options);
return this;
},
//图片定时播放
picInterval:function(options){
var delay = options.picInterval;
setInterval(function(){
var $imgDiv = $("div[name='imageDiv']");
var imgWidth = $imgDiv.children().first().css("width").replace("px","");
var imgDivWidth = $imgDiv.css("width").replace("px","");
var left = $imgDiv.css("left").replace("px","");
if(imgDivWidth <= Math.abs(left-imgWidth)){
$imgDiv.animate({"left":"0px"},1000);
}else{
$imgDiv.animate({"left":left-imgWidth+"px"},1000);
}
}, delay);
}
});
})(jQuery);
调用方式:
var options = {};
var imgSrc = [];
imgSrc.push("css/image/pic1.png");
imgSrc.push("css/image/pic2.png");
imgSrc.push("css/image/pic3.png");
imgSrc.push("css/image/pic4.png");
imgSrc.push("css/image/pic5.png");
options.imgs = imgSrc;
options.picWidth = $("#photoDisplayDiv").css("width").replace("px","")-3;
options.picHeight = $("#photoDisplayDiv").css("height").replace("px","")-3;
$("#photoDisplayDiv").divInit(options);