JS特效第122弹：jQuery相册图片掀开切换代码

马coder

于 2024-02-01 17:45:00 发布

阅读量297

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375605

版权

jQuery相册图片掀开切换代码，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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>
<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>

</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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</body>
</html>

全部代码：jQuery相册图片掀开切换代码