Ini ialah pemalam tayangan slaid berbilang fungsi yang menyokong berbilang konfigurasi Gaya css ditemui dalam talian dan kod di dalamnya adalah asli, semburan ringan~
;(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);
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Bagaimana untuk mengekstrak audio daripada video dalam java
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
