关于点击按钮图片左右切换的随笔

$(function(){
/*
      #imgLeft 向左移动图标
      #imgRight 向右移动图标
      #box 装载图片的容器
      .animate({left:"向左移动距离（记得加px加引号）"}，移动速度);
    */
$('#imgLeft').click(function(){
   $('#box').animate({left:"0px"},1000);
   $('#imgRight').attr("src","Iamges/right.png");
   $('#imgLeft').attr("src","Iamges/left2.png");
  })
   $('#imgRight').click(function(){
   $('#box').animate({left:"-964px"},1000);
   $('#imgRight').attr("src","Iamges/right2.png");
   $('#imgLeft').attr("src","Iamges/left.png");
  })
}) 

 

#middle  //装载图片容器的div
{
    position: relative; 
    width: 967px;
    height: 417px;
    margin: 0 auto;
    overflow:hidden; //记得要把超出的宽度隐藏起来
}
#box{
 width:1934px;
 height:417px;
 position:absolute; //要把容器设为absolute
 top:0px;
 left:0px;
}
#box .page{

float:left;   //将图片向左浮动
width:967px;
height:417px;
border:none;
}

 详细点的，可以参考http://www.cnblogs.com/wenson/p/3341074.html