图片掀开切换效果：
<!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><h1>Gary</h1><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></body></html>@charset "utf-8";body{ background-color: #F5F3F3 }h1{ text-align:center; font-size:18px}.container{ background: #FF9; width: 420px; height: 300px; margin: 0px auto; cursor: pointer; overflow: hidden; box-shadow: 6px 4px 5px hsla(0,0%,59%,.2); -webkit-box-shadow: 6px 4px 5px hsla(0,0%,59%,.2); }.container img{ ???background:#FFF; ???display:block; ???width:400px; ???height:280px; ???padding:10px; ???float:left; ???????-webkit-transition:0.7s; ???-moz-transition:0.7s; ???-o-transition:0.7s;}.zoom{ ???position:absolute; ???-moz-transform:translate(-150px,-120px); ???-webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); ???-ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); ???-o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);}.name{ ???background:#FFF; ???width:220px; ???height:30px; ???margin:15px auto; ???cursor:pointer; ???box-shadow:2px 2px 5px #969696;/*opera或ie9*/ ????-webkit-border-radius:20px; ???-moz-border-radius:20px; ???border-radius:20px;}.name p{ ???font:bold 24px Verdana, Geneva, sans-serif; ???text-align:center; ???line-height:30px; ???color:#FFF; ???background:#333; ???-webkit-border-radius:20px; ???-moz-border-radius:20px; ???border-radius:20px;}实现过程 ：
.zoom{ ???position:absolute; ???-moz-transform:translate(-150px,-120px); ???-webkit-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); ???-ms-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg); ???-o-transform:scale(1.1) translate(-150px,-120px) skew(15deg,-30deg);}transform语法：传送门
translate(x,y) 定义 2D 转换
scale(x,y) 定义 2D 缩放转换
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
一、点击相册实现图片切换
???$(".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); ???????????} ?????????????})addClass() ：向被选元素添加"zoom"类
removeClass() ：从被选元素移除"zoom"类
点击相册实现图片淡入效果：$(selector).fadeOut(speed,callback)
$(selector).fadeOut(speed,callback)speed：可选。规定元素从可见到隐藏的速度。默认为 "normal"。参数值：毫秒 （比如 1500）"slow""normal""fast"在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。callback：可选。fadeOut 函数执行完之后，要执行的函数。如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。除非设置了 speed 参数，否则不能设置该参数。
（jQuery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到淡入淡出效果目的，但缺点是有轻微的卡顿感，并且运行效率一般）
appendTo() ：”在被选元素的结尾（仍然在内部）插入指定内容
children() ：返回被选相册的所有照片，实现便利效果
二、不点击图片时，实现相册(5s)自动切换图片
???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); ???}定时器setTimeout()
setTimeout(code,millisec)：用于在指定的毫秒数后调用函数或计算表达式
code （必需）：要调用的函数后要执行的 JavaScript 代码串。
millisec（必需）：在执行代码前需等待的毫秒数
setTimeout() 调用一次只能执行 code 一次
三、当鼠标悬停相册上时停止图片切换
???????$(".container img").hover(function(){ ???????????stopPlay(); ???},function(){ ???????????interval = setTimeout(auto,5000); ???}) ???????function stopPlay(){ ???????clearTimeout(interval) ???} ???auto();hover() ：规定当鼠标指针悬停在被选元素上时要运行的stopPlay()方法
clearTimeout()：停止setTimeout()的执行
JS框架_(JQuery.js)图片相册掀开切换效果
原文地址：https://www.cnblogs.com/1138720556Gary/p/9376828.html