当前位置: 代码迷 >> Web前端 >> 一个简略的Tab平滑切换特效jquery代码,没有做最大效率优化
  详细解决方案

一个简略的Tab平滑切换特效jquery代码,没有做最大效率优化

热度:140   发布时间:2013-10-08 17:08:58.0
一个简单的Tab平滑切换特效jquery代码,没有做最大效率优化

注意事项:

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');
        }
    }
}

最终效果图(因为项目保密。所以涂黑了)


  相关解决方案