首页 / 脚本样式 / JavaScript / jquery制作多功能轮播图插件

;（function（$） {"use strict";var methods = {o : {next: "#cycle-next",prev: "#cycle-prev",pager : "#cycle-nav",slider : "#beauty-slider",timeLine : "#timeLine",innerTimeLine : "#inner-timeLine",timeLineNode : "#timeLine-node",sliderItemClass : "sliderItem",nodeActive : "node_active",displays : {fade : "fade",left : "left",right : "right",top : "top",bottom : "bottom"},navHtml : "<a href="javascript:;" class="&">?</a>",navConfig : {navBoxClass : "cycle-nav", navActiveClass: "activeSlide" ,showNum : true}},generateId : function（）{return "-" + new Date（）.getTime（）;},generateTemplate : function（id,settings）{var htmls = new Array（）;htmls.push（"<div class="slider-wrap">"）;htmls.push（"<div class="cycleslider-wrap">"）;htmls.push（"<div id="beauty-slider" + id + "" class="cycleslider"></div>"）;if（settings.isArrow） {htmls.push（"<a id="cycle-prev" + id + "" class="cycle-prev" href="javascript:;" title="试试左方向键翻页">Prev</a>"）;htmls.push（"<a id="cycle-next" + id + "" class="cycle-next" href="javascript:;" title="试试右方向键翻页">Next</a>"）;}if（settings.showTimeLine） {htmls.push（"<div class="timeLine" id="timeLine" + id + "">"）;htmls.push（"<div class="innerTimeLine" id="inner-timeLine" + id + "" style="width:0px;"> </div>"）;htmls.push（"<div id="timeLine-node" + id + ""></div>"）;htmls.push（"</div>"）;}if（settings.isNav） {htmls.push（"<div id="cycle-nav" + id + "" class="cycle-nav"></div>"）;}htmls.push（"</div>"）;htmls.push（"<div class="loader"></div>"）;htmls.push（"</div>"）;return htmls;},init : function（dom, options） {var s = this;var defaults = { url : "", data : {} , auto : false ,time : 2000, overLay : false, isArrow : true, isNav : true ,showTimeLine : false,showTip : false, keyboard : true, display : s.o.displays.fade,navConfig : s.o.navConfig};var settings = $.extend（{},defaults, options）;var id = s.generateId（）;$（".slider-wrap .loader"）.show（）;var imgArray = s.returnImgArray（dom, settings）;if （imgArray ！= null && imgArray.length > 0） {s["imgcnt" + id] = imgArray.length;$（dom）.html（s.generateTemplate（id,settings）.join（""））.show（）;var slider = $（s.o.slider + id）;var pager = $（s.o.pager + id）;var timeLineNode = $（s.o.timeLineNode + id）;s.o.innerW = $（dom）.width（） - 20;var imgHtml = "";var pageHtml = "";var timeHtml = "";$.each（imgArray,function（index,item）{var picClass = index == 0 ? s.o.sliderItemClass : s.o.sliderItemClass + " none";var navClass = index == 0 ? settings.navConfig.navActiveClass : "";imgHtml +="<div class="" + picClass + ""><a href=""+ （ s.isParamValid（item.picUrl） ? item.picUrl : "javascript:;" ） +""><img src="" + item.picPath + "" width=""+item.width+"" height="" +item.height+ "" title="" + item.title + ""/></a></div>";pageHtml += s.o.navHtml.replace（"?", settings.navConfig.showNum ? index + 1 : ""）.replace（"&", navClass）;var left = s.o.innerW * index / s["imgcnt" + id] - 13;var nodeClass = index == 0 ? s.o.nodeActive : "";timeHtml +="<div class="node " + nodeClass + "" style="left: " + left + "px;">";if（settings.showTip） {timeHtml +="<div class="tooltip">" + item.title + "</div>";}timeHtml +="</div>";}）;slider.html（imgHtml）;if（settings.isNav） {if（settings.navConfig.navBoxClass） {pager.removeClass（s.o.navConfig.navBoxClass）.addClass（settings.navConfig.navBoxClass）;}pager.html（pageHtml）;}if（settings.showTimeLine） {timeLineNode.html（timeHtml）;}slider.width（s.o.innerW）;slider.find（"." + s.o.sliderItemClass）.width（s.o.innerW）;$（s.o.timeLine + id）.width（s.o.innerW）;if（settings.overLay） {if（$.fn.layerModel） {$（dom）.layerModel（{staySame : true, blurClose : true}）;} else {alert（"请先引入layerModel插件！"）;}}s.initBind（id, settings）;s["currentIndex" + id] = 0;var totalTime = settings.time / 1000 * s["imgcnt" + id];if（settings.auto） {if（settings.showTimeLine） {s.startTimeLine（id , totalTime,settings）;} else {s.o.timeInterval = window.setInterval（function（）{$（"#cycle-next" + id）.click（）;}, settings.time）;}}} else {return;}return dom;},startTimeLine : function（id ,time, settings） {var s = this;var $innerTimeLine = $（s.o.innerTimeLine + id）;var crnW = $innerTimeLine.width（）;for （var i = 0; i < s["imgcnt" + id]; i++） {var autoW = Math.floor（s.o.innerW * i / s["imgcnt" + id]）;if（crnW == autoW） {s["currentIndex" + id] = i;s.updateImgLink（id, settings）;$（s.o.timeLineNode + id）.find（"div.node"）.eq（i）.addClass（s.o.nodeActive）.siblings（）.removeClass（s.o.nodeActive）;}}if（crnW < s.o.innerW） {$innerTimeLine.animate（{width : "+=1px"}, time , "linear", function（）{s.startTimeLine（id, time, settings）;}）;} else {$innerTimeLine.width（0）;s.startTimeLine（id, time, settings）;}},initBind :function（id, settings） {var s = this;var isEasing = $.easing.def;if（settings.isArrow） {$（"#cycle-prev" + id + ", #cycle-next" + id）.css（{opacity: "0"}）;$（".cycleslider-wrap"）.hover（function（）{$（"#cycle-prev" + id）.stop（）.animate（{left: "-31", opacity: "1"},200,isEasing ? "easeOutCubic" : ""）;$（"#cycle-next" + id）.stop（）.animate（{right: "-31", opacity: "1"},200,isEasing ?"easeOutCubic" : ""）;}, function（） {$（"#cycle-prev" + id）.stop（）.animate（{left: "-50", opacity: "0"},400,isEasing ?"easeInCubic" : ""）;$（"#cycle-next" + id）.stop（）.animate（{right: "-50", opacity: "0"},400,isEasing ?"easeInCubic" : ""）;}）;$（"#cycle-prev" + id）.bind（"click",function（）{s["currentIndex" + id] = s["currentIndex" + id] <= 0 ? s["imgcnt" + id] - 1 : s["currentIndex" + id] - 1;s.updateImgLink（id,settings）;}）;$（"#cycle-next" + id）.bind（"click",function（）{s["currentIndex" + id] = s["currentIndex" + id] < s["imgcnt" + id] - 1 ? s["currentIndex" + id] + 1 : 0;s.updateImgLink（id,settings）;}）;}$（".slider-wrap .loader"）.hide（）;$（"a",s.o.pager + id）.bind（"click",function（）{if （$（this）.hasClass（s.o.navConfig.navActiveClass））{return false;}s["currentIndex" + id] = $（this）.index（）;s.updateImgLink（id,settings）;}）; if（settings.auto && settings.showTimeLine） {$（"div.node",s.o.timeLineNode + id）.bind（{click : function（）{if（$（this）.hasClass（s.o.nodeActive））{return false;}s["currentIndex" + id] = $（this）.index（）;s.updateImgLink（id,settings）;},mouseover : function（）{if（settings.showTip） {$（this）.find（".tooltip"）.fadeIn（）;}},mouseout : function（）{if（settings.showTip） {$（this）.find（".tooltip"）.fadeOut（）;}}}）;}// 键盘操作if（settings.keyboard）{$（window）.keydown（function（event）{//<---if（event.keyCode == 37）{$（"#cycle-prev" + id）.click（）;}//--->if（event.keyCode == 39）{$（"#cycle-next" + id）.click（）;}}）;}},updateImgLink : function（id, settings）{var s = this;var index = s["currentIndex" + id];var display = settings.display;var isEasing = $.easing.def;var $items = $（"div." + s.o.sliderItemClass,s.o.slider + id）;switch （display） {case s.o.displays.fade :$items.eq（index）.show（）.siblings（）.hide（）;break;case s.o.displays.left :$items.css（{ position : "absolute", top : 0, left : s.o.innerW }）.hide（）;$items.eq（index）.animate（{ left : 0 }, 100, isEasing ? "easeOutCubic" : ""）.show（）;$（s.o.slider + id）.height（s.getImgMaxHeight（id））;break;case s.o.displays.right :$items.css（{ position : "absolute", top : 0, right : s.o.innerW }）.hide（）;$items.eq（index）.animate（{ right : 0 }, 100, isEasing ? "easeOutCubic" : ""）.show（）;$（s.o.slider + id）.height（s.getImgMaxHeight（id））;break;case s.o.displays.top :break;case s.o.displays.bottom : break;default :break;}$（"a",s.o.pager + id）.eq（index）.addClass（settings.navConfig.navActiveClass）.siblings（）.removeClass（settings.navConfig.navActiveClass）;// 更新进度条的信息if（settings.auto && settings.showTimeLine） {var indexWidth = Math.floor（s.o.innerW * index / s["imgcnt" + id]）;$（s.o.innerTimeLine + id）.animate（{width : indexWidth +"px"}, 500 , "linear", function（）{$（s.o.timeLineNode + id）.find（"div.node"）.eq（index）.addClass（s.o.nodeActive）.siblings（）.removeClass（s.o.nodeActive）;}）;}},getImgMaxHeight : function（id） {var s = this;var slider = $（s.o.slider + id）;var maxHeight = 0;$.each（slider.find（"img"）,function（index,item）{var imgHeight = this.height;maxHeight = Math.max（maxHeight,imgHeight）;}）;return maxHeight;},returnImgArray : function（dom,settings）{var s = this;var imgArray = new Array（）;var url = settings.url;if （s.isParamValid（url）） {$.ajax（{url : url + "?t=" + new Date（）.getTime（）,type : "POST",async : false,data : settings.data,dataType : "json",success : function（data） {if （s.isParamValid（data）） {$.each（data, function（index, item） {imgArray.push（item）;}）;}},error : function（） {alert（"图片数据源地址无效..."）;return null;},complete : function（XHR, TS） { XHR = null; }}）;} else {var imgs = $（dom）.find（"img"）;if （imgs ！= null && imgs.length > 0） {$.each（imgs,function（i,o）{var pic = new Object（）;pic.picUrl = $（o）.parent（"a"）.attr（"href"）;pic.picPath = $（o）.attr（"src"）;pic.width = $（o）.attr（"width"）;pic.height = $（o）.attr（"height"）;pic.title = $（o）.attr（"title"）;imgArray.push（pic）;}）;}}return imgArray;},isParamValid : function（v） {return ！（v == "" || v == null || v == undefined）;}};$.fn.beautyFocus = function（options） {return this.each（function（index,item） {methods.init（item, options）;}）;};}）（jQuery）;