一、通过别名$.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>
四、css样式
.slider-container{ width: 100%; position: relative; }
.slider-container .inner-container{ text-align: center; }
.slider-container .inner-container .img-item{ width: 100%; }
.slider-container .inner-container .img-item img{ max-width: 100% !important; }
.slider-container .page-box{ width: 100%; padding: 30px 0; text-align: center; }
.slider-container .page-box span{
display: inline-block;
vertical-align: middle;
border: 1px solid #cccccc;
font-size: 12px;
color: #333333;
line-height: 1;
padding: 5px 8px;
margin: 0 2px;
cursor: pointer;
}
.slider-container .page-box span.act{
background: #003366;
color: #ffffff;
border-color: #003366;
}
.slider-container .description{
padding: 20px;
font-size: 16px;
color: #333333;
line-height: 1.5;
}
.slider-container .btn-box .btn{
width: 32px;
height: 100px;
background: no-repeat center;
background-size: 100% 100%;
outline: none;
position: absolute;
top: 50%;
margin-top: -50px;
}
.slider-container .btn-box .btn.btn-left{
left: 0;
background-image: url("images/btn_left.png");
}
.slider-container .btn-box .btn.btn-left:hover{
background-image: url("images/btn_left_hover.png");
}
.slider-container .btn-box .btn.btn-right{
right: 0;
background-image: url("images/btn_right.png");
}
.slider-container .btn-box .btn.btn-right:hover{
background-image: url("images/btn_right_hover.png");
}
.slider-container.fixed-container{
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
.slider-container.fixed-container .inner-container{
height: 100%;
box-sizing: border-box;
padding-bottom: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slider-container.fixed-container .btn-box .btn.btn-left{ left: 10px; }
.slider-container.fixed-container .btn-box .btn.btn-right{ right: 10px; }
.slider-container.fixed-container .page-box{
padding: 20px 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
}
.slider-container.fixed-container .page-box span{ color: #ffffff; }
.slider-container.fixed-container .description{ color: #F1F1F1; }
.slider-container.fixed-container .btn-top-close{
font-size: 14px;
color: #ffffff;
line-height: 1;
padding: 8px 12px;
border: 1px solid #ffffff;
border-radius: 5px;
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
}
五、插件调用
$(function(){
$('#imgContent').Sliders();
});
效果如下:
六、通过调整参数,修改轮播图展现形式
该功能可以实现,点击文章详情页中图片,实现灯箱形式,进行图片切换展示。
//切换为灯箱形式
$('#imgContent').Sliders({
type: "LIGHT_BOX"
});
效果如下:
该插件只是实现简单轮播图切换和展示功能,如果需要实现更多效果和功能,可在基础上添加修改。