jQuery结合animate.css动画库实现的点击图片动画切换特效,图片切换时具有透明度变化、滑动、缩放大小效果。
js代码
<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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791