瓦窑源码 快速建站好帮手

动态漂亮的jQuery制作点击图片相册掀开切换效果

特效介绍

这款jQuery制作点击图片相册掀开切换效果,鼠标点击图片自动切换到下一张特效,非常的漂亮有创意。

js代码

<script type="text/javascript">
$(function(){   
  
var interval;
$(".container img").click(function cover(){
$(this).addClass("zoom").fadeOut(700,append);
function append(){
$(this).removeClass("zoom").appendTo(".container").show();
var name = $(".container").children("img").first().attr("alt");
$(".name p").text("No "+name);
}
  
})
 
function auto(){
var play = $(".container").children("img").first();
play.addClass("zoom").fadeOut(700,append);
function append(){
$(this).removeClass("zoom").appendTo(".container").show();
var name = $(this).parent().children("img").first().attr("alt");
$(".name p").text("No "+name);
}
interval = setTimeout(auto,5000);
}
 
$(".container img").hover(function(){
stopPlay();
},function(){
interval = setTimeout(auto,5000);
})
 
function stopPlay(){
clearTimeout(interval)
}
auto();
 
})
</script>

具体效果看右侧的【在线演示】吧^_^

图片相册掀开切换

TAG标签:图片相册掀开切换

上一个:大气的jQuery响应式动态弹出相册图片放大预览代码
下一个:ma5gallery制作响应式图片相册切换全屏预览代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。

整站源码 - 静态模板 - 网页特效 - CMS教程 - 站长指南 - 热门排行 - XML - HTML - TAG - 免责声明

Copyright© 2020 瓦窑源码 WHY114.COM 版权所有 鲁ICP备12005559号

客服QQ:1847629575 微信号:qilujianzhan

展开