注意事项:
div格式应该如下:
<div id="slides"> <div>xxxxxxx</div> <div>xxxxxxx</div> <div>xxxxxxx</div> </div>
div子元素不要有任何margin和left效果
使用方式:
slides._init($('#slides'));
代码如下:
/* SlidesJS 1.0 (c) 2013 by 金色猪子(longx1001@qq.com) Updated: 2013-9-28 16:23:58 Apache License: http://www.apache.org/licenses/LICENSE-2.0 */ var slides = { _obj : new Object(),//初始化#slides _objpage : new Object(),//初始化分页代码 _objchilds : new Object(),//初始化#slides的子元素div _current : 0,//初始化当前分页索引 _count : 0,//初始化#slides的子元素数量 _init: function(obj){ slides._obj = obj; slides._objchilds = slides._obj.children('div'); slides._count = slides._objchilds.length; var _wid = slides._obj.width(); slides._objchilds.each(function(){ $(this).css({float:'left',width:_wid,overflow:'hidden'}); }); slides._obj.css({width:_wid*slides._count, height:slides._objchilds.eq(0).height(), overflow:'hidden'}); slides._objpage = $('<div id="slides-page"></div>'); var pagecontent = ''; pagecontent += '<a class="slidesjs-previous slidesjs-navigation active" href="#" title="上一题" style="margin-left: 30%;">上一题</a>'; pagecontent += '<ul class="slidesjs-pagination">'; for(var i=1; i<=slides._count; i++){ pagecontent += '<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="'+i+'" class="'+(i===1?'active':'')+'">'+i+'</a></li>'; } pagecontent += '</ul>'; pagecontent += '<a class="slidesjs-next slidesjs-navigation" href="#" title="下一题">下一题</a>'; slides._objpage.append(pagecontent); slides._obj.after(slides._objpage); $('.slidesjs-previous').click(function(){ slides._pre();return false; }); $('.slidesjs-next').click(function(){ slides._next();return false; }); $('.slidesjs-pagination-item').click(function(){ slides._go($(this).index());return false; }); }, _next: function(){ if(slides._current!==slides._count-1){ ++slides._current; slides._obj.css('height',slides._objchilds.eq(slides._current).height()+'px'); var _objleft = Number(slides._obj.css('marginLeft').replace('px','')); slides._obj.animate({ marginLeft: (_objleft-960)+'px' }, 'slow'); slides._checkcurrent(); } }, _pre: function(){ if(slides._current!==0){ --slides._current; slides._obj.css('height',slides._objchilds.eq(slides._current).height()+'px'); var _objleft = Number(slides._obj.css('marginLeft').replace('px','')); slides._obj.animate({ marginLeft: (_objleft+960)+'px' }, 'slow'); slides._checkcurrent(); } }, _go: function(indexs){ slides._obj.css('height',slides._objchilds.eq(indexs).height()+'px'); var _objleft = Number(slides._obj.css('marginLeft').replace('px','')); slides._obj.css({ marginLeft: (_objleft-(960*(indexs-slides._current)))+'px' }); slides._current = indexs; slides._checkcurrent(); }, _checkcurrent: function(){ $('body,html').animate({scrollTop:0},200); slides._objpage.children('ul').children().each(function(i){ if(i===slides._current){ $(this).children('a').eq(0).addClass('active'); }else{ $(this).children('a').eq(0).removeClass('active'); } }); if (slides._current === 0) { $('.slidesjs-previous').addClass('active'); } else { $('.slidesjs-previous').removeClass('active'); } if (slides._current === slides._count-1) { $('.slidesjs-next').addClass('active'); } else { $('.slidesjs-next').removeClass('active'); } } }
最终效果图(因为项目保密。所以涂黑了)