对于焦点图，我们平时用superslide已经能实现大部分效果，但有时候想实现些更绚丽的效果，例如现在一些流行的焦点图都有切换图片后几段文字（图片）独立动画出现，这样有视觉差异，动画效果更生动，其实如果你熟悉js，那么在superslide的基础上也可以做出一样的效果。

思路就是利用superslide的endFun回调函数，每次切换图片后执行endFun，然后结合css和html，用js控制文字的动画效果。

我们可以先看看在线演示

这里可以下载demo

代码比较长，就不全部贴出来了，这里解释下比较重要的代码：

css：

.slideBox .bd dd{ position:absolute; display:none }
/* 这里的定位需与dd的playOut属性一致 */
.slideBox .bd .item1 .dd1{ top:50px; right:340px; font-size:50px; line-height:150%;   }
.slideBox .bd .item1 .dd2{ top:140px; right:340px; }
.slideBox .bd .item1 .dd3{ top:190px; right:340px; }

html：

  

    
   

        
    

            
     

                
      
                
      

       《变4》全球3亿夺冠
      
                
      

       中国内地票房持平北美
      
                
      

       《变形金刚4》上周五中美同步上映
      
            
     
        
        .............
    
   

  

以 .dd1 为例子，上面的代码意思是，首先css定义文字绝对定位在 top:50px； right:340px;，然后 .dd1加上属性playIn（展现方式），控制.dd1最终位置在 right:140px，从340px --> 140px，这就是动画过程了，playIn的值会写入jquery的animate函数，可以根据自身需要修改。

playOut值是 right:340px，这和css一致的，目的是让.dd1返回默认状态，为下次切换时做相同的动画效果。

这里可以看看js是怎么写的，通常下不用修改。

js：

jQuery(".slideBox").slide({mainCell:".bd ul",titCell:".hd ul",effect:"fold", autoPage:"
",autoPlay:true,interTime:5000,
    endFun:function(i,c,s){
        var curItem = $(".bd li",s).eq(i);
        curItem.find("dd").each(function(j){
            // j*250，每行文字延迟执行时间，按需修改；同时这里会把playIn的值写入animate动画函数
            $(this).stop(1,1).delay( j*250).animate( eval( '(' +$(this).attr("palyIn") +')' )); 
        });
        $(".bd li",s).not(curItem).find("dd").each(function(j){
            $(this).stop(1,1).animate( eval( '(' + $(this).attr("palyOut")  +')' ) )
        });
    }
});

有兴趣的可以修改看看～