php短視訊原始碼，jQuery實現自定義輪播圖外掛

php短視訊原始碼，jQuery實現自定義輪播圖外掛

一、通過別名$.fn進行引用，開發jQuery外掛

/**
 * 輪播圖
 * @constructor
 */
$.fn.Sliders = function(){
    //do something...
}

二、內部功能實現

/**
 * 輪播圖
 * @constructor
 * @params options 引數
 */
$.fn.Sliders = function(options){
var _TYPES_ = {
INNER: "INNER",             //替換原內容
LIGHT_BOX: "LIGHT_BOX",     //圖片燈箱
};
 
//引數合併
options = $.extend({
type: _TYPES_.INNER
}, options);
 
var that = this,
_imgContent_ = $(this),
//獲取該容器下所有圖片資源
_imgs_ = _imgContent_.find('img').clone(),
//重組圖片容器集
_imgItems_,
//定義重新組合DOM結構HTML
_divContent_ = '<div class="slider-container">' +
'<div class="inner-container"></div>' +
'<div class="description"></div>' +
'<div class="btn-box">' +
'<button type="button" class="btn btn-left"></button>' +
'<button type="button" class="btn btn-right"></button>' +
'</div>' +
'<div class="page-box"></div>' +
'</div>',
_pageBeforeHtml = '<span class="btn-previous">上一頁</span>',
_pageAfterHtml = '<span class="btn-last">下一頁</span>',
_pageActiveClassName = 'act',
 
//重新定義新容器物件
_divObj_ = $(_divContent_),
//獲取放置圖片容器
_container_ = _divObj_.find('.inner-container'),
//左側按鈕
_btnLeft = _divObj_.find('.btn-left'),
//右側按鈕
_btnRight = _divObj_.find('.btn-right'),
//獲取放置分頁容器
_pageBox_ = _divObj_.find('.page-box'),
//描述內容
_description_ = _divObj_.find('.description'),
//上一頁按鈕
_previousBtn_,
//下一頁按鈕
_lastBtn_,
//數字按鈕
_numBtn_,
 
//關閉按鈕
_closeBtn_ = $('<div class="btn-top-close">關閉</div>'),
 
//當前頁
_currentPage = 1,
//定義總頁數
_pageTotal = _imgs_.length,
 
//容器高度
_containerHeight = $(this).height();
 
//新增上一頁按鈕html
_pageBox_.html(_pageBeforeHtml);
//迴圈新增到圖片容器中
_imgs_.each(function(i){
var _item = $('<div class="img-item" />');
//新增圖片資訊
_container_.append(_item.append(this));
//判斷描述是否存在
//獲取當前圖片標題
var _title = $(this).data('title');
if(_title){
_item.append('<div class="description">'+_title+'</div>')
}
//if end
 
//新增分頁數
_pageBox_.append('<span class="btn-num" data-num="'+(i+1)+'">'+(i+1)+'</span>');
});
 
//獲取圖片包裹容器集
_imgItems_ = _container_.find('.img-item');
 
//新增下一頁按鈕
_pageBox_.append(_pageAfterHtml);
 
_numBtn_ = _pageBox_.find('.btn-num');               //數字按鈕
_previousBtn_ = _pageBox_.find('.btn-previous');     //上一頁按鈕
_lastBtn_ = _pageBox_.find('.btn-last');             //下一頁按鈕
 
//重新渲染資料
function renderData(_current){
//判斷是否當前頁
var _domCurAct = _numBtn_.filter('.act');
if("undefined"!==_domCurAct.get(0)){
var _num = _domCurAct.data('num');
if(_num==parseInt(_current)){
return false;
}
}
//if end
//賦值當前頁
_currentPage = parseInt(_current);
 
//顯示指定圖片
_imgItems_.hide().eq(_currentPage-1).fadeIn();
//切換分頁當前狀態
_numBtn_.removeClass(_pageActiveClassName).eq(_currentPage-1).addClass(_pageActiveClassName);
 
//判斷是否為第一頁
if(_currentPage==1){
_previousBtn_.hide();
_btnLeft.hide();
}else if(_previousBtn_.is(':hidden')){
_previousBtn_.show();
_btnLeft.show();
}
 
//判斷是否最後一頁
if(_currentPage==_pageTotal){
_lastBtn_.hide();
_btnRight.hide();
}else if(_lastBtn_.is(':hidden')){
_lastBtn_.show();
_btnRight.show();
}
}
 
//- - - - - - - - - - - - - - 新增事件 Start - - - - - - - - - - - - - -
//點選分頁數
_pageBox_.on('click', '.btn-num', function(){
//console.log('btn-num');
renderData($(this).data('num'));
});
 
//點選分頁上一頁
_pageBox_.on('click', '.btn-previous', function(){
renderData(_currentPage-1<=0?1:_currentPage-1);
});
 
//點選分頁下一頁
_pageBox_.on('click', '.btn-last', function(){
renderData(_currentPage+1>_pageTotal?_pageTotal:_currentPage+1);
});
 
//左側點選事件
_btnLeft.click(function(){
renderData(_currentPage-1<=0?1:_currentPage-1);
});
 
//右側點選事件
_btnRight.click(function(){
renderData(_currentPage+1>_pageTotal?_pageTotal:_currentPage+1);
});
 
//原圖片事件
_imgContent_.on('click', 'img', function(){
_currentPage = $(this).index()+1;
renderData(_currentPage);
 
//判斷容器是否隱藏
if(_divObj_.is(':hidden')){
_divObj_.fadeIn();
}
});
 
//關閉按鈕
_divObj_.on('click', '.btn-top-close', function(){
//判斷容器是否隱藏
if(!_divObj_.is(':hidden')){
_divObj_.fadeOut();
}
});
//- - - - - - - - - - - - - - 新增事件 End - - - - - - - - - - - - - -
 
//初始化資料
renderData(_currentPage);
 
//新增頁面中
if(options.type==_TYPES_.INNER){
$(this).html(_divObj_);
 
//計時判斷容器高度，是否修整左右兩側按鈕
setTimeout(function(){
_containerHeight = $(that).height();
 
//計算容器高度
if(_containerHeight>1200){
var _params = {
"top": "150px",
"margin-top": 0
};
_btnLeft.css(_params);
_btnRight.css(_params);
}
}, 1000);
}else if(options.type==_TYPES_.LIGHT_BOX){
_divObj_.addClass('fixed-container')
_divObj_.append(_closeBtn_);
_divObj_.hide();
$('body').append(_divObj_);
}
}

三、html程式碼

<div class="content" id="imgContent">
<img src="images/thumb_01.png" data-title="描述內容" />
<img src="images/thumb_02.png" data-title="" />
<img src="images/thumb_03.png" data-title="" />
<img src="images/thumb_04.png" data-title="" />
<img src="images/thumb_05.png" data-title="" />
<img src="images/thumb_06.png" data-title="" />
<img src="images/thumb_07.png" data-title="" />
<img src="images/thumb_08.png" data-title="" />
<img src="images/thumb_09.png" data-title="" />
<img src="images/thumb_10.png" data-title="" />
</div>

以上就是php短視訊原始碼，jQuery實現自定義輪播圖外掛， 更多內容歡迎關注之後的文章