/** * jquery piccarousel.js * version 0.1.4 * * https://github.com/javion25/piccarousel.js * mit licensed * * copyright (c) 2015 javion.com - a project by javion */ ;(function($){ //瀹氫箟piccarousel绫? var piccarousel = (function(){ //瀹氫箟piccarousel鐨勬瀯閫犲嚱鏁? function piccarousel(element,options){ this.settings = $.extend(true,$.fn.piccarousel.defaults,options||{}); this.element = element; this.init(); } //瀹氫箟piccarousel鐨勬柟娉? piccarousel.prototype = { /*璇存槑锛氬垵濮嬪寲鎻掍欢*/ init:function(){ var me = this; me.poster = me.element; me.posteritemmain = me.poster.find("ul.poster-list"); me.nextbtn = me.poster.find("div.poster-next-btn"); me.prevbtn = me.poster.find("div.poster-prev-btn"); me.posteritems = me.poster.find("li.poster-item"); if(me.posteritems.size()%2 == 0){ me.posteritemmain.append(me.posteritems.ep(0).clone()); me.posteritems = me.posteritemmain.children; } me.posterfirstitem = me.posteritems.first(); me.posterlastitem = me.posteritems.last(); me.rotateflag =true; //璁剧疆閰嶇疆鍙傛暟鍊? me.setsettingvalue(); me.setposterpost(); me.nextbtn.click(function(){ if(me.rotateflag){ me.rotateflag = false; me.carouserotate("left"); }; }); me.prevbtn.click(function(){ if(me.rotateflag){ me.rotateflag = false; me.carouserotate("right"); }; }); //鏄惁寮€鍚嚜鍔ㄦ挱鏀? if(me.settings.autoplay){ me.autoplay(); me.poster.hover(function(){ window.clearinterval(me.timer); },function(){ me.autoplay(); }); } }, //鑷姩鎾斁鏂规硶 autoplay:function(){ var me = this; me.timer = window.setinterval(function(){ me.nextbtn.click(); },me.settings.delay); }, //鏃嬭浆鏂规硶 carouserotate:function(dir){ var me = this; var zindexarr = []; if(dir === "left"){ me.posteritems.each(function(){ var self = $(this), prev = self.prev().get(0)?self.prev():me.posterlastitem, width = prev.width(), height = prev.height(), zindex = prev.css("zindex"), opacity = prev.css("opacity"), left = prev.css("left"), top = prev.css("top"); zindexarr.push(zindex); self.animate({ width:width, height:height, opacity:opacity, left:left, top:top },me.settings.speed,function(){ me.rotateflag = true; }); }); me.posteritems.each(function(i){ $(this).css("zindex",zindexarr[i]); }) }else if(dir === "right"){ me.posteritems.each(function(){ var self = $(this), next = self.next().get(0)?self.next():me.posterfirstitem, width = next.width(), height = next.height(), zindex = next.css("zindex"), opacity = next.css("opacity"), left = next.css("left"), top = next.css("top"); zindexarr.push(zindex); self.animate({ width:width, height:height, opacity:opacity, left:left, top:top },me.settings.speed,function(){ me.rotateflag = true; }); }); me.posteritems.each(function(i){ $(this).css("zindex",zindexarr[i]); }) } }, //璁剧疆鍓╀綑鐨勫抚鐨勪綅缃叧绯? setposterpost:function(){ var me = this; var sliceitems = me.posteritems.slice(1), slicesize = sliceitems.size()/2, rightslice = sliceitems.slice(0,slicesize), level = math.floor(me.posteritems.size()/2), leftslice = sliceitems.slice(slicesize); //璁剧疆鍙宠竟甯х殑浣嶇疆鍏崇郴鍜屽搴︺€侀珮搴︺€乼op... var rw = me.settings.posterwidth, rh = me.settings.posterheight, //((瀹瑰櫒瀹?甯у)/2)/灞傜骇 190 gap = ((me.settings.width-me.settings.posterwidth)/2)/level; var firstleft = (me.settings.width-me.settings.posterwidth)/2; var fixoffsetleft = firstleft + rw; //璁剧疆鍙宠竟鐨勪綅缃叧绯? rightslice.each(function(i){ level--; rw = rw*me.settings.scale; rh = rh*me.settings.scale; var j=i; $(this).css({ zindex:level, width:rw, height:rh, opacity:1/(++j), left:fixoffsetleft+(++i)*gap-rw, top:me.setvertucalalign(rh) }); }); //璁剧疆宸﹁竟鐨勪綅缃叧绯? var lw = rightslice.last().width(), lh = rightslice.last().height(), oloop = math.floor(me.posteritems.size()/2); leftslice.each(function(i){ $(this).css({ zindex:i, width:lw, height:lh, opacity:1/oloop, left:i*gap, top:me.setvertucalalign(lh) }); lw = lw/me.settings.scale; lh = lh/me.settings.scale; oloop--; }); }, //璁剧疆鍨傜洿鎺掑垪瀵归綈 setvertucalalign:function(height){ var me = this; var verticaltype = me.settings.verticalalign, top = 0; if(verticaltype === "middle"){ top = (me.settings.height - height)/2; }else if(verticaltype === "top"){ top = 0; }else if(verticaltype === "bottom"){ top = me.settings.height - height; }else{ top = (me.settings.height-height)/2; }; return top; }, //閰嶇疆宸﹀彸鎸夐挳鍜岀涓€甯т綅缃? setsettingvalue:function(){ var me = this; me.poster.css({ width:me.settings.width, height:me.settings.height }); me.posteritemmain.css({ width:me.settings.width, height:me.settings.height }); //璁$畻宸﹀彸鍒囨崲鎸夐挳鐨勫搴? var w = (me.settings.width-me.settings.posterwidth)/2; me.nextbtn.css({ width:w, height:me.settings.height, zindex:math.ceil(me.posteritems.size()/2) }); me.prevbtn.css({ width:w, height:me.settings.height, zindex:math.ceil(me.posteritems.size()/2) }); me.posterfirstitem.css({ width:me.settings.posterwidth, height:me.settings.posterheight, top: me.setvertucalalign(me.settings.posterheight), left:w, zindex:math.floor(me.posteritems.size()/2) }); } }; return piccarousel; })(); //鍗曚緥妯″紡,娣诲姞piccarousel鏂规硶 $.fn.piccarousel = function(options){ return this.each(function(){ var me = $(this), instance = me.data("piccarousel"); if(!instance){ instance = new piccarousel(me,options); me.data("piccarousel",instance); } }); }; //榛樿閰嶇疆鍙傛暟 $.fn.piccarousel.defaults = { "width":1000, //骞荤伅鐗囩殑瀹藉害 "height":300, //骞荤伅鐗囩殑楂樺害 "posterwidth":520, //骞荤伅鐗囩涓€甯х殑瀹藉害 "posterheight":300, //骞荤伅鐗囩涓€寮犵殑楂樺害 "scale":0.9, //璁板綍鏄剧ず姣斾緥鍏崇郴 "speed":300, //璁板綍骞荤伅鐗囨粴鍔ㄩ€熷害 "autoplay":false, //鏄惁寮€鍚嚜鍔ㄦ挱鏀? "delay":500, //鑷姩鎾斁闂撮殧 "verticalalign":"middle" //鍥剧墖瀵归綈浣嶇疆 } }(jquery));