注意事项:
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');
}
}
}
最终效果图(因为项目保密。所以涂黑了)