首页 / JQUERY / 一个基于jquery的图片切换效果_jquery

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一个基于jquery的图片切换效果_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1450字，纯文字阅读大概需要3分钟。

内容图文

下面的代码对于学习jquery的朋友是个参考
一个基于jquery的图片切换效果_jquery - 文章图片
html代码：

代码
代码如下:


一个基于jquery的图片切换效果_jquery - 文章图片
一个基于jquery的图片切换效果_jquery - 文章图片
一个基于jquery的图片切换效果_jquery - 文章图片
一个基于jquery的图片切换效果_jquery - 文章图片



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}

内容总结

以上是互联网集市为您收集整理的一个基于jquery的图片切换效果_jquery全部内容，希望文章能够帮你解决一个基于jquery的图片切换效果_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/312291.html

来源：【匿名】