jquery制作多功能輪播圖插件

2024-05-06 16:18:11

字體：大中小

來源：轉載

供稿：網友

本文給大家分享的是一款基于jQuery制作的多功能的輪播幻燈插件，支持多種配置，十分的實用，這里推薦給大家，有需要的小伙伴可以參考下。

這是一款多功能幻燈片插件，支持多種配置，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:;' 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);