这是一款多功能幻灯片插件，支持多种配置，css样式是扒的网上的，里面的代码原创，轻喷~
?",navConfig : {navBoxClass : "cycle-nav",navActiveClass: "activeSlide",showNum : true}
},generateId : function(){
return "-" + new Date().getTime();
},generateTemplate : function(id,settings){
var htmls = new Array();
htmls.push('
');
if(settings.isArrow) {
htmls.push('');
htmls.push('');
}
if(settings.showTimeLine) {
htmls.push('
');
htmls.push('
');
htmls.push('
');
}
if(settings.isNav) {
htmls.push('');
}
htmls.push('
');
htmls.push('');
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 +='';
}
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 < 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"},'linear',function(){
s.startTimeLine(id,settings);
});
} else {
$innerTimeLine.width(0);
s.startTimeLine(id,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",isEasing ?"eaSEOutCubic" : "");
},function() {
$("#cycle-prev" + id).stop().animate({left: "-50",opacity: "0"},400,isEasing ?"easeInCubic" : "");
$("#cycle-next" + id).stop().animate({right: "-50",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);
},mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver : function(){
if(settings.showTip) {
$(this).find(".tooltip").fadeIn();
}
},mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut : function(){
if(settings.showTip) {
$(this).find(".tooltip").fadeOut();
}
}
});
}
// <a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>操作
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 ? "ea<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>utCubic" : "").show();
$(s.o.slider + id).height(s.getImgMaxHeight(id));
break;
case s.o.displays.right :
$items.css({ position : "absolute",right : s.o.innerW }).hide();
$items.eq(index).animate({ right : 0 },isEasing ? "ea<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>utCubic" : "").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,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"),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,item) {
imgArray.push(item);
});
}
},error : function() {
alert("<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>数据源地址无效...");
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);
以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/jquery/54984.html