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实现自定义轮播图插件， 更多内容欢迎关注之后的文章