jQuery点击图片相册掀开切换效果

作者 : 小刺猬 本文共862个字,预计阅读时间需要3分钟 发布时间: 2020-08-3 共506人阅读

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>
VIP免费 永久VIP免费

已有0人支付


刺猬源码 » jQuery点击图片相册掀开切换效果

刺猬QQ交流群号多少?
363432

发表评论