分享Flight主题中的焦点图（基于JQ）

关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动，淡入淡出）三种动画模式。可以设置执行时间。可以自定义大小，方便应用。可以选择是否自动切换。还是上代码吧。也没啥说的了。

/*参数：
------------------------------------------------------------------------
      obj:    要切换的对像[ID,Class]
animation:  设置切换方式 [left(向左滚动),top(向上滚动),fade(淡入淡出)]
     time:    设置每次动画执行间隔时间 [单位毫秒)]
    speed:    设置每次动画执行时间 [单位毫秒]
     auto:    设置是否显自动切换 [可选值为:true,false]
  cssName:  附加Class名称 [自定义焦点图容器样式,可以不填]
-------------------------------------------------------------------------
//示例:
-------------------------------------------------------------------------
<div id="ifocus">
    <ul class="ifocus_list">
        <li><a href="#1"><img src="images/01.png" alt="图片1" /></a></li>
        <li><a href="#2"><img src="images/02.png" alt="图片2" /></a></li>
        <li><a href="#3"><img src="images/03.png" alt="图片3" /></a></li>
    </ul>
</div>
-------------------------------------------------------------------------
//example1.jQFocus("#ifocus","left",2000,500,true);
-------------------------------------------------------------------------
//example2.jQFocus("#ifocus","top",2000,500,true,"border_red");
------------------------------------------------------------------------*/
 
function jQFocus(obj,animation,time,speed,auto,cssName) {
    var t = n =0,li=$(obj+" li"),count = $(obj+" li").size();
        _width = $(obj).width(),_height = $(obj).height();
        $(obj).css({width: (_width)+"px",height:_height+"px"}).attr("class",cssName);
        $("<div class='ifocus_info'></div>").appendTo(obj);
        $("<span class='ifocus_title'></span>").appendTo(obj).html($(".ifocus_list li:first-child").find("img").attr('alt'));
    var num='<ul class="ifocus_control">';
        for(var i=0;i<count;i++){num+='<li>'+(i+1)+'</li>'};
        num+='</ul>';
        $(obj).append(num);
        $(obj+" .ifocus_control li:first-child").addClass("current");
        $(".ifocus_title").click(function(){window.open($(".ifocus_list a:first-child").attr('href'), "_blank")});
    $(obj+" .ifocus_control li").click(function() {
            var i = $(this).text() - 1;
                n = i;
                if (i >= count) return;
                animation = animation.substring();
                switch(animation) {
                    case "left":
                        $(obj+" .ifocus_list").css({width:(_width*count)+"px",height:_height+"px"});
                        $(obj+" .ifocus_list li").css({float:"left",height:_height+"px"});
                        $(obj+" .ifocus_list").animate({left:-(_width*i)},speed);
                    break;
                    case "top":
                        $(obj+" .ifocus_list").animate({top:-(_height*i)},speed);
                    break;
                    case "fade":
                        $(obj+" .ifocus_list li").filter(":visible").fadeOut(speed).parent().children().eq(i).fadeIn(speed);
                }
                $(".ifocus_title").html($(".ifocus_list a").eq(i).find("img").attr('alt'));
                $(this).addClass("current").siblings().removeClass("current");
        });
        if(auto==true ) {
            showAuto = function (){
                n = n >= (count - 1) ? 0 : ++n;
                $(obj+" .ifocus_control li").eq(n).trigger('click');
            }
            t = setInterval("showAuto()", time);
            $(obj).hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", time);});   
        }
}

　　对于代码这个也没啥说的了。会点JQ的能看懂。看不懂的我也说不明白。例子就在文章的头上；