一个图片切换效果

    下午群里讨论的一个图片切换效果，胡乱写了一下。可以直接下载demo

html代码：

  <div class="warp" id="warp">
    <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" />
    <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic2.bmp" alt="" class="imgLittle" />
    <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic3.bmp" alt="" class="imgLittle" />
    <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic4.bmp" alt="" class="imgLittle" />
  </div>

 

javascript：

 

     $(document).ready(function(){
      var $warp = $("#warp");
      $warp.IsRunning = false;
      var seconds = 500;
      $warp.children("img").click(function(){
        if($warp.IsRunning){return;}
        $warp.IsRunning = true;
        var $imgs = $("#warp").children("img");
        
        $imgs.eq(2).css("marginTop","63px").animate({marginTop:"0px"},{duration:seconds});
        $imgs.eq(0).css({position:"absolute",opacity:"0.5"}).animate({width:"108px", height:"57px",left:"372px",top:"126px",opacity:"1"},{duration:seconds});
        //$imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2"});
        
        $imgs.eq(1).css({position:"absolute",left:"372px",top:"6px",opacity:"0.2",clear:"none"}).animate({width:"360px", height:"190px",left:"-9px",top:"-5px",opacity:"1"},{duration:seconds,complete:function(){
          $imgs.eq(0).appendTo($("#warp"));
          $imgs.eq(0).removeAttr("style").removeClass("imgBig").addClass("imgLittle");
          $imgs.eq(1).removeAttr("style").removeClass("imgLittle").addClass("imgBig");          
          $warp.IsRunning = false;
        }});
        
      });
    });

 

 css代码：

.warp{width:487px; height:194px; overflow:hidden;border:solid 1px #ccc;position:relative; top:0px; left:0px; background-color:#fafafa}
.warp img{border-width:0px;cursor:pointer;position:relative; top:0px; left:0px}
.imgBig{float:left; width:360px; height:190px;padding:2px;}
.imgLittle{float:right; width:108px; height:57px;padding:6px 5px 0 10px;clear:right}

 四个图片轮流换demo