php短视频源码，jQuery实现自定义轮播图插件

一、通过别名$.fn进行引用，开发jQuery插件

/**<br> * 轮播图<br> * @constructor<br> */<br>$.fn.Sliders = function(){<br>    //do something...<br>}

二、内部功能实现

/**<br> * 轮播图<br> * @constructor<br> * @params options 参数<br> */<br>$.fn.Sliders = function(options){<br>var _TYPES_ = {<br>INNER: "INNER",             //替换原内容<br>LIGHT_BOX: "LIGHT_BOX",     //图片灯箱<br>};<br> <br>//参数合并<br>options = $.extend({<br>type: _TYPES_.INNER<br>}, options);<br> <br>var that = this,<br>_imgContent_ = $(this),<br>//获取该容器下所有图片资源<br>_imgs_ = _imgContent_.find('img').clone(),<br>//重组图片容器集<br>_imgItems_,<br>//定义重新组合DOM结构HTML<br>_divContent_ = '<div class="slider-container">' +<br>'<div class="inner-container"></div>' +<br>'<div class="description"></div>' +<br>'<div class="btn-box">' +<br>'<button type="button" class="btn btn-left"></button>' +<br>'<button type="button" class="btn btn-right"></button>' +<br>'</div>' +<br>'<div class="page-box"></div>' +<br>'</div>',<br>_pageBeforeHtml = '<span class="btn-previous">上一页</span>',<br>_pageAfterHtml = '<span class="btn-last">下一页</span>',<br>_pageActiveClassName = 'act',<br> <br>//重新定义新容器对象<br>_divObj_ = $(_divContent_),<br>//获取放置图片容器<br>_container_ = _divObj_.find('.inner-container'),<br>//左侧按钮<br>_btnLeft = _divObj_.find('.btn-left'),<br>//右侧按钮<br>_btnRight = _divObj_.find('.btn-right'),<br>//获取放置分页容器<br>_pageBox_ = _divObj_.find('.page-box'),<br>//描述内容<br>_description_ = _divObj_.find('.description'),<br>//上一页按钮<br>_previousBtn_,<br>//下一页按钮<br>_lastBtn_,<br>//数字按钮<br>_numBtn_,<br> <br>//关闭按钮<br>_closeBtn_ = $('<div class="btn-top-close">关闭</div>'),<br> <br>//当前页<br>_currentPage = 1,<br>//定义总页数<br>_pageTotal = _imgs_.length,<br> <br>//容器高度<br>_containerHeight = $(this).height();<br> <br>//添加上一页按钮html<br>_pageBox_.html(_pageBeforeHtml);<br>//循环添加到图片容器中<br>_imgs_.each(function(i){<br>var _item = $('<div class="img-item" />');<br>//添加图片信息<br>_container_.append(_item.append(this));<br>//判断描述是否存在<br>//获取当前图片标题<br>var _title = $(this).data('title');<br>if(_title){<br>_item.append('<div class="description">'+_title+'</div>')<br>}<br>//if end<br> <br>//添加分页数<br>_pageBox_.append('<span class="btn-num" data-num="'+(i+1)+'">'+(i+1)+'</span>');<br>});<br> <br>//获取图片包裹容器集<br>_imgItems_ = _container_.find('.img-item');<br> <br>//添加下一页按钮<br>_pageBox_.append(_pageAfterHtml);<br> <br>_numBtn_ = _pageBox_.find('.btn-num');               //数字按钮<br>_previousBtn_ = _pageBox_.find('.btn-previous');     //上一页按钮<br>_lastBtn_ = _pageBox_.find('.btn-last');             //下一页按钮<br> <br>//重新渲染数据<br>function renderData(_current){<br>//判断是否当前页<br>var _domCurAct = _numBtn_.filter('.act');<br>if("undefined"!==_domCurAct.get(0)){<br>var _num = _domCurAct.data('num');<br>if(_num==parseInt(_current)){<br>return false;<br>}<br>}<br>//if end<br>//赋值当前页<br>_currentPage = parseInt(_current);<br> <br>//显示指定图片<br>_imgItems_.hide().eq(_currentPage-1).fadeIn();<br>//切换分页当前状态<br>_numBtn_.removeClass(_pageActiveClassName).eq(_currentPage-1).addClass(_pageActiveClassName);<br> <br>//判断是否为第一页<br>if(_currentPage==1){<br>_previousBtn_.hide();<br>_btnLeft.hide();<br>}else if(_previousBtn_.is(':hidden')){<br>_previousBtn_.show();<br>_btnLeft.show();<br>}<br> <br>//判断是否最后一页<br>if(_currentPage==_pageTotal){<br>_lastBtn_.hide();<br>_btnRight.hide();<br>}else if(_lastBtn_.is(':hidden')){<br>_lastBtn_.show();<br>_btnRight.show();<br>}<br>}<br> <br>//- - - - - - - - - - - - - - 添加事件 Start - - - - - - - - - - - - - -<br>//点击分页数<br>_pageBox_.on('click', '.btn-num', function(){<br>//console.log('btn-num');<br>renderData($(this).data('num'));<br>});<br> <br>//点击分页上一页<br>_pageBox_.on('click', '.btn-previous', function(){<br>renderData(_currentPage-1<=0?1:_currentPage-1);<br>});<br> <br>//点击分页下一页<br>_pageBox_.on('click', '.btn-last', function(){<br>renderData(_currentPage+1>_pageTotal?_pageTotal:_currentPage+1);<br>});<br> <br>//左侧点击事件<br>_btnLeft.click(function(){<br>renderData(_currentPage-1<=0?1:_currentPage-1);<br>});<br> <br>//右侧点击事件<br>_btnRight.click(function(){<br>renderData(_currentPage+1>_pageTotal?_pageTotal:_currentPage+1);<br>});<br> <br>//原图片事件<br>_imgContent_.on('click', 'img', function(){<br>_currentPage = $(this).index()+1;<br>renderData(_currentPage);<br> <br>//判断容器是否隐藏<br>if(_divObj_.is(':hidden')){<br>_divObj_.fadeIn();<br>}<br>});<br> <br>//关闭按钮<br>_divObj_.on('click', '.btn-top-close', function(){<br>//判断容器是否隐藏<br>if(!_divObj_.is(':hidden')){<br>_divObj_.fadeOut();<br>}<br>});<br>//- - - - - - - - - - - - - - 添加事件 End - - - - - - - - - - - - - -<br> <br>//初始化数据<br>renderData(_currentPage);<br> <br>//添加页面中<br>if(options.type==_TYPES_.INNER){<br>$(this).html(_divObj_);<br> <br>//计时判断容器高度，是否修整左右两侧按钮<br>setTimeout(function(){<br>_containerHeight = $(that).height();<br> <br>//计算容器高度<br>if(_containerHeight>1200){<br>var _params = {<br>"top": "150px",<br>"margin-top": 0<br>};<br>_btnLeft.css(_params);<br>_btnRight.css(_params);<br>}<br>}, 1000);<br>}else if(options.type==_TYPES_.LIGHT_BOX){<br>_divObj_.addClass('fixed-container')<br>_divObj_.append(_closeBtn_);<br>_divObj_.hide();<br>$('body').append(_divObj_);<br>}<br>}

三、html代码

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