一个基于jquery的图片切换效果

下面的代码对于学习jquery的朋友是个参考

超文本标记语言代码：代码复制代码代码如下： div class=' warp ' id=' warp ' img src=' http :http://images。cn博客。com/cn blogs _ com/张乐/252347/t _ pic1。BMP ' alt=' class=' IMgbig '/IMG src=' http :http://images。cn博客。com/cn blogs _ com/张乐/252347/t _ pic2。IMM复制代码代码如下：美元（文件)。ready(function(){ var $ warp=$(' # warp ')；曲速IsRunning=falsevar秒=500;$warp.children('img ').单击(函数(){ if($warp ).IsRunning){ return；} $曲速IsRunning=true var $ imgs=$(' # warp ').儿童(“img”)；$imgs.eq(2).css('marginTop '，' 63px ').动画({marginTop:'0px'}，持续时间{ :秒})；$imgs.eq(0).css({position: '绝对值'，opacity: ' 0.5 ' }).动画({width:'108px '、height:'57px '、left:'372px '、top:'126px '、opacity: ' 1 ' }、{ duration :秒})；//$imgs.eq(1).css({position:'absolute '，left:'372px '，top:'6px '，opa city 3360 ' 0.2 ' })；$imgs.eq(1).css({position:'absolute '，left:'372px '，top:'6px '，opacity: ' 0.2 '，clear:'none'}).动画({width:'360px '，height:'190px '，left:'-9px '，top:'-5px '，opacity: ' 1 ')，{ duration :秒，完成：函数(){ $ imgs。等式(0).appendTo($(" # warp "))；$imgs.eq(0).removeAttr('style ').removeClass('imgBig ').添加CLaSS(' IMglitle ')；$imgs.eq(1).removeAttr('style ').移除CLaSS(' IMglitle ').添加CLaSS(' IMgbig ')；曲速IsRunning=false } })；});});钢性铸铁代码：复制代码代码如下：翘曲{ width :487 pxh three :194 px飞越：隐藏；border:solid 1px # ccc位置：相对；top:0pxleft:0px背景-color:#fafafa} .warp img {边框宽度：0 px光标：指针指针；位置：相对；top:0pxleft:0px} .imgBig { float:left宽度宽度：360像素高度：190 pxpadding:2px }。imgLittle { float:right宽度宽度：108像素高度：57 pxpadd :6 px 5px 0 10p xclear : right }