分享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的能看懂。看不懂的我也说不明白。例子就在文章的头上;