这是一款多功能幻灯片插件，支持多种配置，css样式是扒的网上的，里面的代码原创，轻喷~
;(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:;'>?</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>'); htmls.push('<div>'); htmls.push('<div></div>'); if(settings.isArrow) { htmls.push('<a href="javascript:;" title="试试左方向键翻页">Prev</a>'); htmls.push('<a href="javascript:;" title="试试右方向键翻页">Next</a>'); } if(settings.showTimeLine) { htmls.push('<div>'); htmls.push('<div> </div>'); htmls.push('<div></div>'); htmls.push('</div>'); } if(settings.isNav) { htmls.push('<div></div>'); } htmls.push('</div>'); htmls.push('<div></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><a href="'+ ( s.isParamValid(item.picUrl) ? item.picUrl : "javascript:;" ) +'"><img src="' + item.picPath + '" 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>'; if(settings.showTip) { timeHtml +='<div>' + 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);