<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.sxdscyy.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.shaxiangift.com/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery相册图片掀开切换代码 - </title>
<link rel="stylesheet"type="text/css" href="css/style.css" />
<script type="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(function(){
varinterval;
$(".containerimg").click(function cover(){
$(this).addClass("zoom").fadeOut(700,append);
functionappend(){
$(this).removeClass("zoom").appendTo(".container").show();
varname =$(".container").children("img").first().attr("alt");
$(".name p").text("No"+name);
}
})
functionauto(){
varplay = $(".container").children("img").first();
play.addClass("zoom").fadeOut(700,append);
functionappend(){
$(this).removeClass("zoom").appendTo(".container").show();
varname = $(this).parent().children("img").first().attr("alt");
$(".name p").text("No"+name);
}
interval= setTimeout(auto,5000);
}
$(".containerimg").hover(function(){
stopPlay();
},function(){
interval= setTimeout(auto,5000);
})
functionstopPlay(){
clearTimeout(interval)
}
auto();
})
</script>
</head>
<body>
<div class="container"style="margin-top:100px">
<img src="images/a1.png" alt="1" />
<img src="images/a2.png" alt="2" />
<img src="images/a3.png" alt="3" />
<img src="images/a4.png" alt="4" />
<img src="images/a5.png" alt="5" />
</div>
<div class="name">
<p>No 1</p>
</div>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoftYaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/"target="_blank"></a></p>
</div>
</body>
</html>
联系客服
