微信公众号

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

视觉设计791514年前 (2010-10-13)

关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是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);});
}
}