您的位置:首页 > Web前端 > JQuery

jQuery插件-div中滚动图片

2015-07-29 16:06 746 查看
(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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: