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

下面的代码对于学习jquery的朋友是个参考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}

　　推荐阅读

　　location.href 在IE6中不跳转的解决方法与推荐使用代码

以下内容为转帖：代码复制代码代码如下: <script type="text/javascript"> function goUrl(x) { window.location.href=x; } </script> <a href="javascript:;" onclick="javascript:goUrl('http://www.baidu.co>>>详细阅读

本文标题：一个基于jquery的图片切换效果

地址：http://www.17bianji.com/kaifa2/JS/26067.html

1/2 1