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

204 阅读 0 评论 135 点赞

我是靠谱客的博主可靠绿草，最近开发中收集的这篇文章主要介绍一个基于jquery的图片切换效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

html代码：

代码

复制代码代码如下:

 
<div class="warp" id="warp"> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411123550298.bmp" alt="" class="imgBig" /> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411123550198.bmp" alt="" class="imgLittle" /> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411123550628.bmp" alt="" class="imgLittle" /> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411123550193.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} 