通过本文主要向大家介绍了jquery,轮播,幻灯等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
这是一款多功能幻灯片插件，支持多种配置，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);