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);
相关文章推荐
- jQuery选择器大全
- JQuery mobile 实例 api
- jQuery插件开发模式
- js/jquery操作div显示或隐藏
- ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包,Styles.Render()输出风格包:
- 基于jquery的静态页面翻页
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
- jquery的DOM元素操作
- Struct2前台后台数据交互jquery+ajax
- jquery学习教程视频 链接
- 使用 jQuery.i18n.properties 实现 Web 前端的国际化
- Jquery结合datagrid框架
- [JQuery] jquery.fn.extend 与 jquery.extend
- jquery-validation 使用
- jQuery----经典表单应用
- Jquery easyui 的datagrid 每行增加操作链接-修改
- jquery 隐藏/显示(改进版)
- jQuery链式语法演示
- jquery ui 的autocomplete 点击就加载指定数组
- PHP jQuery实现上传图片时预览图片的功能实例