首页 > 视觉设计 > 分享Flight主题中的焦点图(基于JQ)

分享Flight主题中的焦点图(基于JQ)

2010-10-13 toyean 视觉设计 0人评论 2698人浏览

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

  1. /*参数:
  2. ------------------------------------------------------------------------
  3.       obj:    要切换的对像[ID,Class]
  4. animation:  设置切换方式 [left(向左滚动),top(向上滚动),fade(淡入淡出)]
  5.      time:    设置每次动画执行间隔时间 [单位毫秒)]
  6.     speed:    设置每次动画执行时间 [单位毫秒]
  7.      auto:    设置是否显自动切换 [可选值为:true,false]
  8.   cssName:  附加Class名称 [自定义焦点图容器样式,可以不填]
  9. -------------------------------------------------------------------------
  10. //示例:
  11. -------------------------------------------------------------------------
  12. <div id="ifocus">
  13.     <ul class="ifocus_list">
  14.         <li><a href="#1"><img src="images/01.png" alt="图片1" /></a></li>
  15.         <li><a href="#2"><img src="images/02.png" alt="图片2" /></a></li>
  16.         <li><a href="#3"><img src="images/03.png" alt="图片3" /></a></li>
  17.     </ul>
  18. </div>
  19. -------------------------------------------------------------------------
  20. //example1.jQFocus("#ifocus","left",2000,500,true);
  21. -------------------------------------------------------------------------
  22. //example2.jQFocus("#ifocus","top",2000,500,true,"border_red");
  23. ------------------------------------------------------------------------*/
  24.  
  25. function jQFocus(obj,animation,time,speed,auto,cssName) {
  26.     var t = n =0,li=$(obj+" li"),count = $(obj+" li").size();
  27.         _width = $(obj).width(),_height = $(obj).height();
  28.         $(obj).css({width: (_width)+"px",height:_height+"px"}).attr("class",cssName);
  29.         $("<div class='ifocus_info'></div>").appendTo(obj);
  30.         $("<span class='ifocus_title'></span>").appendTo(obj).html($(".ifocus_list li:first-child").find("img").attr('alt'));
  31.     var num='<ul class="ifocus_control">';
  32.         for(var i=0;i<count;i++){num+='<li>'+(i+1)+'</li>'};
  33.         num+='</ul>';
  34.         $(obj).append(num);
  35.         $(obj+" .ifocus_control li:first-child").addClass("current");
  36.         $(".ifocus_title").click(function(){window.open($(".ifocus_list a:first-child").attr('href'), "_blank")});
  37.     $(obj+" .ifocus_control li").click(function() {
  38.             var i = $(this).text() - 1;
  39.                 n = i;
  40.                 if (i >= count) return;
  41.                 animation = animation.substring();
  42.                 switch(animation) {
  43.                     case "left":
  44.                         $(obj+" .ifocus_list").css({width:(_width*count)+"px",height:_height+"px"});
  45.                         $(obj+" .ifocus_list li").css({float:"left",height:_height+"px"});
  46.                         $(obj+" .ifocus_list").animate({left:-(_width*i)},speed);
  47.                     break;
  48.                     case "top":
  49.                         $(obj+" .ifocus_list").animate({top:-(_height*i)},speed);
  50.                     break;
  51.                     case "fade":
  52.                         $(obj+" .ifocus_list li").filter(":visible").fadeOut(speed).parent().children().eq(i).fadeIn(speed);
  53.                 }
  54.                 $(".ifocus_title").html($(".ifocus_list a").eq(i).find("img").attr('alt'));
  55.                 $(this).addClass("current").siblings().removeClass("current");
  56.         });
  57.         if(auto==true ) {
  58.             showAuto = function (){
  59.                 n = n >= (count - 1) ? 0 : ++n;
  60.                 $(obj+" .ifocus_control li").eq(n).trigger('click');
  61.             }
  62.             t = setInterval("showAuto()", time);
  63.             $(obj).hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", time);});   
  64.         }
  65. }

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

打赏

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

拓源网官方微信
关注拓源网微博
476590949
09:00 - 18:00
拓源网QQ群: 491920017
客服邮箱: