jquery幻灯片

 $(document).ready(function(){
            //获取图片个数
            var len = $("#focus ul li").length; 
            //获取焦点图整个宽度
            var zWidth = $("#focus").width();
            var index = 0;
            var hTime;
            
            var btn = "<div class='btn'>";
            for(var i=0; i < len; i++) {
                btn += "<span></span>";
            }
            btn += "</div>";
            $("#focus").append(btn);
        
            //设置按钮滑动事件
            $("#focus .btn span").css("opacity",0.4).mouseover(function(){
                index = $("#focus .btn span").index(this);
                Showpic(index);
            }).first().mouseover();
            
            //自动播放
            $("#focus").hover(function(){
                clearInterval(hTime);
            }, function(){
                 hTime = setInterval(function(){
                    Showpic(index);
                    index++;
                    if(index == len) {index = 0;}
                },2000);
            }).trigger("mouseleave");
            
            //计算出外围ul元素的宽度,不设置的话 图片滑动有空隙
            $("#focus ul").css("width",zWidth * (len));
            
            //图片切换效果
            function Showpic(index){
                var lpx = -index*zWidth
                $("#focus ul").stop().animate({"left":lpx},300);
                //设置当前按钮效果
                $("#focus .btn span").stop().animate({"opacity":"0.4"},300).eq(index).stop().animate({"opacity":"1"},300);
            }
        });

 <style type="text/css">
            *{margin:0;padding:0;}
            body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
            ul,li{list-style:none;}
            img{border:0;}
            .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
            h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
            /* focus */
            #focus{width:800px;height:280px;overflow:hidden;position:relative;}
            #focus ul{height:280px;position:absolute;}
            #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
            #focus ul li div{position:absolute;overflow:hidden;}
            #focus .btn{position:absolute;width:780px;height:20px;right:0;bottom:0;text-align:center;}
            #focus .btn span{ display: inline-block;width:25px;height:10px;margin-left:5px;cursor:pointer;background:#000;}
        </style>

<div class="wrapper">
            <div id="focus">
                <ul>
                    <li><a href="#" target="_blank"><img src="images/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>
                    <li><a href="#" target="_blank"><img src="images/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>
                    <li><a href="#" target="_blank"><img src="images/03.jpg" alt="jquery商城焦点图效果" /></a></li>
                    <li><a href="#" target="_blank"><img src="images/04.jpg" alt="jquery商城焦点图代码" /></a></li>
                    <li><a href="#" target="_blank"><img src="images/05.jpg" alt="jquery商城焦点图源码" /></a></li>
                </ul>
            </div><!--focus end-->

        </div>