百度云盘 传送门 密码:y0dk
图片掀开切换效果：
<!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; 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;
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;
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()的执行