jQuery插件-div中滚动图片

(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);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值