jquery 自适应的全屏淡入淡出焦点图

<style>

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, blockquote, pre, form, fieldset, table, th, td, span{padding:0;margin:0;}
#full-screen-slider { width:100%; height:396px; float:left; position:relative}
#slides { display:block; width:100%; height:396px; list-style:none; padding:0; margin:0; position:relative}
#slides li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute}
#slides li a { display:block; width:100%; height:100%; text-indent:-9999px}
#pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;  padding:5px 15px 5px 0; margin:0}
#pagination li { display:block; list-style:none; width:10px; height:10px; float:left; margin-left:15px; border-radius:5px; background:#FFF }
#pagination li a { display:block; width:100%; height:100%; padding:0; margin:0;  text-indent:-9999px;}
#pagination li.current { background:#0092CE}
</style>

<!-- 代码 开始 -->
<div id="full-screen-slider">
	<ul id="slides">
		<li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.lanrentuku.com/" target="_blank">智能网站管理系统</a></li>
		<li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.lanrentuku.com/" target="_blank">仙人掌软件</a></li>
	</ul>
</div>
<!-- 代码 结束 -->

JS部分

* http://www.cactussoft.cn
 *
 * Copyright (c) 2009 - 2013 Jerry
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
$(function(){
    var numpic = $('#slides li').size()-1;
    var nownow = 0;
    var inout = 0;
    var TT = 0;
    var SPEED = 5000;


    $('#slides li').eq(0).siblings('li').css({'display':'none'});//默认除第一个外其余外隐藏


    var ulstart = '<ul id="pagination">',
        ulcontent = '',
        ulend = '</ul>';
    ADDLI();
    var pagination = $('#pagination li');
    var paginationwidth = $('#pagination').width();
    $('#pagination').css('margin-left',(470-paginationwidth))
    
    pagination.eq(0).addClass('current')
        
//增加点击按钮（圆点）部分html
    function ADDLI(){
        //var lilicount = numpic + 1;
        for(var i = 0; i <= numpic; i++){
            ulcontent += '<li>' + '<a href="#">' + (i+1) + '</a>' + '</li>';
        }
        
        $('#slides').after(ulstart + ulcontent + ulend);    
    }

    pagination.on('click',DOTCHANGE)
//点击切换    
    function DOTCHANGE(){
        
        var changenow = $(this).index();
        
        $('#slides li').eq(nownow).css('z-index','900');
        $('#slides li').eq(changenow).css({'z-index':'800'}).show();
        pagination.eq(changenow).addClass('current').siblings('li').removeClass('current');
        $('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(changenow).fadeIn(500);});
        nownow = changenow;
    }
    
    pagination.mouseenter(function(){
        inout = 1;
    })
    
    pagination.mouseleave(function(){
        inout = 0;
    })
    
    function GOGO(){
        
        var NN = nownow+1;
        
        if( inout == 1 ){
//鼠标在点上则不切换            } else {
            if(nownow < numpic){
            $('#slides li').eq(nownow).css('z-index','900');
            $('#slides li').eq(NN).css({'z-index':'800'}).show();
            pagination.eq(NN).addClass('current').siblings('li').removeClass('current');
            $('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(NN).fadeIn(500);});
            nownow += 1;

        }else{
            NN = 0;
            $('#slides li').eq(nownow).css('z-index','900');
            $('#slides li').eq(NN).stop(true,true).css({'z-index':'800'}).show();
            $('#slides li').eq(nownow).fadeOut(400,function(){$('#slides li').eq(0).fadeIn(500);});
            pagination.eq(NN).addClass('current').siblings('li').removeClass('current');

            nownow=0;

            }
        }
        TT = setTimeout(GOGO, SPEED);
    }
    
    TT = setTimeout(GOGO, SPEED); 
//自动切换
})