----------html---------------------------------------------------------------------------------

/*================================== 
@標(biāo)題：淡化版banner 帶標(biāo)題+描述 和 小按鈕 
@時間：2013.11.22 
@來源：BENZI.PW 
@描述: 
插件使用方式: 
使用前請將 CSS HTML 完整的復(fù)制。 
benzi.bzBanner(); 
對象調(diào)用全部在js內(nèi)改動 
container：最外框 
cols：全部內(nèi)容 
btns：全部小按鈕 
act：按鈕激活樣式名 
pre：向前翻按鈕 
next：向后翻按鈕 

====*/ 
var benzi = { 
bzBanner : function(){ 
//參數(shù)所有初始化（封裝后將刪除） 
var values = { 
container:$('.bzBanner'), 
cols:$('.bzBanner .col'), 
btns:$('.bzBanner .btn i'), 
act:'act', 
pre:$('.bzBanner .pre'), 
next:$('.bzBanner .next'), 
now:0 
} 
//淡化效果，設(shè)置所有單個對象的 zindex，以及顯示和隱藏 
// col：所有內(nèi)容對象 
// pre：上一個對象 
// now：當(dāng)前顯示的對象 
//----------------------- 
var weaken = function( pre,now ){ 
var col = values.cols; 
col.css({ zIndex:1 }).eq( pre ).css({ zIndex:2 }); 
col.eq( now ).css({ zIndex:3,opacity:0 }).stop(true).animate({ opacity:1 },700); 
} 
//遞增計算，返回 前一個顯示內(nèi)容 和 當(dāng)前 要顯示的內(nèi)容 
// now：當(dāng)前已經(jīng)選擇的索引 
//------------------- 
var increase = function( now ){ 
var pre = now ,now = pre + 1; 
if( now >= values.cols.length ) now = 0; 
return { pre:pre ,now:now }; 
} 
//遞減計算 
//------------------- 
var degression = function( now ){ 
var pre = now ,now = pre - 1; 
if( now < 0 ) now = values.cols.length-1; 
return { pre:pre ,now:now }; 
} 
//修改小按鈕樣式 
//--------------------- 
var btnStyle = function( now ){ 
if( values.btns && values.act ) 
values.btns.removeClass( values.act ).eq( now ).addClass( values.act ); 
} 
//小按鈕事件掛接，初始化里如果有 小按鈕 則執(zhí)行，否則不執(zhí)行 
//---------------------- 
var button = function(){ 
values.btns.click(function(){ 
var now = $(this).index(); 
if( values.now != now ){ 
weaken( values.now ,now ); 
btnStyle( now ); 
text( now ); 
values.now = now; 
} 
}); 
} 
//內(nèi)容切換 
// aspect：方向，0 或 無值 是后翻，1 是前翻 
//---------------------- 
var change = function( aspect ){ 
var val = aspect ? degression( values.now ) : increase( values.now ); 
weaken( val.pre ,val.now ); 
btnStyle( val.now ); 
text( val.now ); 
values.now = val.now; 
} 
//左右按鈕效果 
//----------------------- 
var shortcut = function(){ 
values.pre.click(function(){ change(1); }); 
values.next.click(function(){ change(); }); 
} 
//文字切換效果，此效果很有針對性，需要樣式支持 
//------------------------ 
var text = function( now ){ 
values.cols.find('span').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 },1000); 
values.cols.find('h3').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate({ opacity:1 },500); 
values.cols.find('p').css({ opacity:0 }).eq( now ).stop(true).delay(1000).animate({ opacity:1 },500); 
} 
//框架尺寸 
//------------------------------- 
$(window).resize(function(){ 
values.container.height( values.cols.find('img').height() ); 
}).resize(); 
// 自動播放，degrees 方法獲取對應(yīng)參數(shù)，并且修改小按鈕樣式（如果有小按鈕的話），然后刷新全局變量 values.now 
// time: 延時時間 
//--------------------- 
var loop,play = function( time ){ 
clearTimeout( loop ); 
loop = setTimeout(function(){ 
change(); 
play( 3000 ); 
}, time ); 
} 
//暫停 和 觸發(fā)自動播放 
//--------------------- 
var control = function(){ 
values.container.hover(function(){ 
clearTimeout( loop ); 
},function(){ 
play( 2000 ); 
}); 
} 
//初始化效果，調(diào)用各個函數(shù) 
//-------------------- 
var initialize = function(){ 
var now = values.now; 
weaken( values.cols.length-1 ,now ); 
if(values.btns ) button(); 
if( values.pre && values.next ) shortcut(); 
btnStyle( now ); 
text( now ); 
play( 4000 ); 
control(); 
} 
//初始化調(diào)用 
//--------------------- 
initialize(); 
} 
}