;(
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 &
#63; s.o.sliderItemClass : s.o.sliderItemClass + " none";
var
navClass = index == 0 &
#63; settings.navConfig.navActiveClass : "";
imgHtml +=
'<div class="'
+ picClass +
'"><a href="'
+ ( s.isParamValid(item.picUrl) &
#63; 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 &
#63; 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 &
#63; 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 &
#63; 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 &
#63; "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 &
#63; "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);