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_ = '
' +
				'
' +
				'
' +
				'
' +
					'' +
					'' +
				'
' +
				'
' +
			'
',
		_pageBeforeHtml = '上一页',
		_pageAfterHtml = '下一页',
		_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_ = $('
关闭
'),

		//当前页
		_currentPage = 1,
		//定义总页数
		_pageTotal = _imgs_.length,

		//容器高度
		_containerHeight = $(this).height();

	//添加上一页按钮html
	_pageBox_.html(_pageBeforeHtml);
	//循环添加到图片容器中
	_imgs_.each(function(i){
		var _item = $('
');
		//添加图片信息
		_container_.append(_item.append(this));
		//判断描述是否存在
		//获取当前图片标题
		var _title = $(this).data('title');
		if(_title){
			_item.append('
'+_title+'
')
		}
		//if end

		//添加分页数
		_pageBox_.append(''+(i+1)+'');
	});

	//获取图片包裹容器集
	_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代码

四、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"
});

效果如下：

该插件只是实现简单轮播图切换和展示功能，如果需要实现更多效果和功能，可在基础上添加修改。