<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery鼠标点击图片滑动切换特效</title>
<link rel="stylesheet" href="css/animate.min.css"/>
<link rel="stylesheet" href="css/zzsc.css"/>
</head>
<body>
<div class="container">
<div class="center animated">
<h1>鼠标点击图片试试效果</h1>
<img class="animated" src="images/island_1x.png" alt=""/>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var imgs=[
"images/island_1x.png",
"images/banana.png",
"images/rescued-illos_1x.png",
"images/rivalry_1x.png",
"images/sir_crags_a_lot_1x.png",
"images/sf-cryptids_1x.png",
"images/db_space_1x.png",
"images/xmas1_1x.png"
];
var counter =0;
$(document).ready(function () {
$(".center").on("click","img",function(){
$(this).removeClass("zoomIn").addClass("fadeOutRight");
counter++;
setTimeout(function(){
if(counter==imgs.length) counter=0;
$(".center img").remove();
$("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));
if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")
},500);
});
});
</script>
</body>
</html>
jQuery实现的鼠标点击图片后呈现图片滑动切换特效源码.zip （12个子文件） 
132686956777605819 css 
animate.min.css 56KB zzsc.css 807B images 
sf-cryptids_1x.png 20KB sir_crags_a_lot_1x.png 57KB island_1x.png 30KB banana.png 57KB rivalry_1x.png 102KB rescued-illos_1x.png 86KB xmas1_1x.png 40KB db_space_1x.png 27KB
index.html 1KB js jquery.min.js 94KB资源评论
