帶蒙版的手風琴效果
1、這個手風琴增加了蒙版效果，看起來更好看
2、代碼採用了jquery的方法，比不帶手風琴的代碼看起來更美觀，更容易理解，整體思路可以參考不帶手風琴的思路。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.carousel {
position: relative;
width: 900px;
height: 300px;
margin: 50px auto;
border: 1px solid blue;
overflow: hidden;
}
.carousel ul li {
position: absolute;
width: 560px;
height: 300px;
top: 0;
left: 0;
}
.carousel ul li.no1 {
left: 180px;
}
.carousel ul li.no2 {
left: 360px;
}
.carousel ul li.no3 {
left: 540px;
}
.carousel ul li.no4 {
left: 720px;
}
.carousel ul li div.mask {
position: absolute;
width: 560px;
height: 300px;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul>
<li class="no0" id="no0"><div class="mask"></div><img src="images/0.jpg" alt=""></li>
<li class="no1" id="no1"><div class="mask"></div><img src="images/1.jpg" alt=""></li>
<li class="no2" id="no2"><div class="mask"></div><img src="images/2.jpg" alt=""></li>
<li class="no3" id="no3"><div class="mask"></div><img src="images/3.jpg" alt=""></li>
<li class="no4" id="no4"><div class="mask"></div><img src="images/4.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 獲取元素
var $carousel = $("#carousel");
// 添加鼠標進入事件
$("li").mouseenter(function() {
// 防流氓
$("li").stop(true);
// 定義變量用於保存觸發事件的序號
var idx = $(this).index();
// console.log(idx);
// 小於或者等於當前序號的圖片應該往左移動 與85相關
$("li:lt(" + (idx + 1) + ")").each(function(i) {
// console.log(i);
$(this).animate({"left": 85 * i}, 500);
})
// 大於idx的圖片應該往右移動 並且與560相關
$("li:gt(" + idx + ")").each(function(i) {
// console.log(i);
$(this).animate({"left": 560 + 85 * (idx + i)}, 500);
})
// 當前蒙版消失
$(this).children(".mask").stop(true).fadeOut(500);
// 其他蒙版恢復
$(this).siblings().children().stop(true).fadeIn(500);
})
// 添加鼠標離開事件
$carousel.mouseleave(function() {
// 防流氓
$("li").stop(true);
// 循環將所有的li 恢復原狀
$("li").each(function(i) {
$(this).animate({"left": 180 * i}, 500);
})
// 所有蒙版恢復
$(".mask").stop(true).fadeIn(500);
})
</script>
</body>
</html>
提示：
1、請各位學習的同學，學習其中的思路，多加練習，做出總結。這樣才能記憶的更加深刻，有問題歡迎留言。
2、jquery的包已經上傳到資源中，可以自行下載，相關的圖片素材，我回頭打包上傳到資源中。