jquery制作多功能轮播图插件_jquery
程序员文章站
2022-04-22 17:00:06
...
这是一款多功能幻灯片插件,支持多种配置,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 : "?", navConfig : {navBoxClass : "cycle-nav", navActiveClass: "activeSlide" ,showNum : true} }, generateId : function(){ return "-" + new Date().getTime(); }, generateTemplate : function(id,settings){ var htmls = new Array(); htmls.push(' '); 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 +=''; 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 +=''; if(settings.showTip) { timeHtml +=''; }); 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 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);' + item.title + ''; } timeHtml +='
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇: JavaScript实现输入字符串是否包含特殊符号或表情的方法介绍
下一篇: php数组合并解决方案
推荐阅读
-
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
-
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
-
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
-
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
-
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
-
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
-
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
-
jQuery 仿百度输入标签插件附效果图
-
jquery插件制作简单示例说明
-
纯css,js原生,js原型,jquery四种方式实现轮播图效果讲解