jquery简单多图片前后滚动插件
<div id="cnblogs_post_body"><div class="cnblogs_code">(function($) { $.fn.slidePicture = function(options) { var ops = $.extend({}, $.fn.slidePicture.defaults, options); return this.each(function() { $this = $(this); var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops; var num = opts.num; var ul = $this.find("ul"); var lifirst = ul.find("li:first"); var liwidth = lifirst.width(); var liheight = lifirst.height(); // img个数 var size = ul.find("li img").size(); // 从第num个往后，都不显示 ul.find("li:gt(" + (num - 1) + ") img,li:gt(" + (num - 1) + ")") .css({ 'display' : 'none' }); // 创建向前按钮 var left_prevous = $("<div id=\"left_prevous\" class=\"pnLi\"><</div>"); // 创建向后按钮 var right_next = $("<div id=\"right_next\" class=\"pnLi\">></div>"); // 添加到div上 $this.before(left_prevous); $this.after(right_next); // div父容器的宽度，高度，偏移量 var dwidth, dheight = $this.height(), dposition = $this.offset(); left_prevous.css({ 'top' : dposition.top + ((dheight - left_prevous.height()) / 2) + "px", 'left' : dposition.left + "px" }); right_next.css({ 'top' : dposition.top + ((dheight - right_next.height()) / 2) + "px", 'display' : 'none' }); /** * chrome浏览器下，父div的内容没有加载完，取得的宽度没有被撑开 * (http://jaykong.blog.163.com/blog/static/8895412010428111617633/) * 设置一下延迟加载右侧按钮的左偏移,100毫秒足够 */ setTimeout(function() { dwidth = $this.width(); right_next.css({ 'left' : dposition.left + parseInt(dwidth - right_next.width()) + "px", 'display' : 'block' }); }, 100); // 隐藏及显示 function fade(fadeOut, fadeIn) { fadeOut.css({ 'display' : 'none' }); fadeIn.css({ 'display' : 'block' }); } // 左侧的index从0开始 var first = 0; // 右侧的index从num开始 var last = num; // 是否前向滚动结束,false表示结束 var firstEnd = false; // 是否后向滚动结束，false表示结束 var lastEnd = false; // 前一个操作是否前滚动,false表示否 var doPrevous = false; // 前一个操作是否后滚动，false表示否 var doNext = false; // 前滚动事件 left_prevous.bind("click", function() { // 前滚动没有结束 if (firstEnd == false) { // 前一个操作是后滚动 if (doNext == true) { last = last; first = first; } // 前一个操作时前滚动，因此前后索引都各自加1 if (doPrevous == true) { last = last - 1; first = first - 1; } fade( ul.find("li:eq(" + last + ") img,li:eq(" + last + ")"), ul.find("li:eq(" + first + ") img,li:eq(" + first + ")")); // 0表示前滚动结束 if (first == 0) { firstEnd = true; doNext = false; } else { doNext = false; } lastEnd = false; doPrevous = true; } }); // 后滚动事件 right_next.bind("click", function() { if (lastEnd == false) { if (doPrevous == true) { last = last; first = first; } if (doNext == true) { last = last + 1; first = first + 1; } fade(ul.find("li:eq(" + first + ") img,li:eq(" + first + ")"), ul.find("li:eq(" + last + ") img,li:eq(" + last + ")")); if (last == size - 1) { lastEnd = true; doPrevous = false; } else { doPrevous = false; } firstEnd = false; doNext = true; } }); }); } $.fn.slidePicture.defaults = { num : 3 };})(jQuery);
页:
[1]