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>

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

效果如下：

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