異型滾動參與多元素運動
思路：
異型滾動就是沒有火車的概念，每個“車廂”都是單獨的個體，點擊按鈕之後：下一個圖片變爲上一個圖片的狀態，包括寬度、高度、位置都會進行輪替。也可以叫做“樣式輪替輪播”。上圖中的輪播看似是5張圖片，實際上需要7張圖片。因爲左右各有小圖片當做貓膩。
jQuery的animate是不能把一個left，動畫爲right定位的。比如一個div天生left:100px;現在你讓他動畫到right:10px。jQuery無能爲力！因爲一個是left屬性一個是right屬性。
原理就是3號元素變爲2號元素的樣子，left、top、width、height四個屬性都變。
2號變成1號……
1號變成0號……
0號變成6號……
$(".no1").animate({“width”: 70,“height”: 50,“left”:-120,“top”:70});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
.carousel {
position: relative;
width: 670px;
height: 221px;
margin: 50px auto;
border: 1px solid #000;
background-image: url(images/shuzi/pic_bg.gif);
/*overflow: hidden;*/
}
.carousel ul li {
position: absolute;
width: 70px;
height: 50px;
left: -120px;
top: 70px;
}
.carousel ul li.no1 {
width: 90px;
height: 60px;
left: 20px;
top: 60px;
}
.carousel ul li.no2 {
width: 112px;
height: 80px;
left: 121px;
top: 30px;
}
.carousel ul li.no3 {
width: 156px;
height: 100px;
left: 250px;
top: 16px;
}
.carousel ul li.no4 {
width: 112px;
height: 84px;
left: 430px;
top: 30px;
}
.carousel ul li.no5 {
width: 90px;
height: 60px;
left: 560px;
top: 60px;
}
.carousel ul li.no6 {
width: 70px;
height: 50px;
left: 710px;
top: 70px;
}
.carousel .btns a {
position: absolute;
width: 44px;
height: 44px;
top: 150px;
}
.carousel .btns a:first-child {
left: 25px;
}
.carousel .btns a:last-child {
right: 25px;
}
img {
width: 100%;
height: 100%;
}
.carousel ul li.waiting {
display: none;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul>
<li class="no0"><img src="images/shuzi/0.png" alt=""></li>
<li class="no1"><img src="images/shuzi/1.png" alt=""></li>
<li class="no2"><img src="images/shuzi/2.png" alt=""></li>
<li class="no3"><img src="images/shuzi/3.png" alt=""></li>
<li class="no4"><img src="images/shuzi/4.png" alt=""></li>
<li class="no5"><img src="images/shuzi/5.png" alt=""></li>
<li class="no6"><img src="images/shuzi/6.png" alt=""></li>
<li class="waiting"><img src="images/shuzi/7.png" alt=""></li>
<li class="waiting"><img src="images/shuzi/8.png" alt=""></li>
<li class="waiting"><img src="images/shuzi/9.png" alt=""></li>
<li class="waiting"><img src="images/shuzi/10.png" alt=""></li>
</ul>
<div class="btns">
<a href="#" id="leftBtn"></a>
<a href="#" id="rightBtn"></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 定義數組將所有li的狀態保存起來
// 一般常量用大寫字母表示
// var JSONARR = [];
// 使用for循環將所有li的狀態保存（width, height, left, top）
// for (var i = 0; i < 7; i++) {
// JSONARR.push({
// "width": $(".no" + i).css("width"),
// "height": $(".no" + i).css("height"),
// "top": $(".no" + i).css("top"),
// "left": $(".no" + i).css("left")
// });
// }
// console.log(JSONARR);
// 將散的語句合併
var JSONARR = (function() {
var temp = [];
for (var i = 0; i < 7; i++) {
temp.push({
"width": $(".no" + i).css("width"),
"height": $(".no" + i).css("height"),
"left": $(".no" + i).css("left"),
"top": $(".no" + i).css("top"),
})
}
return temp;
})()
console.log(JSONARR)
// 定義數組用於保存所有li的類名
// var classNameArr = [];
// // 循環所有的li元素並保存類名
// $("li").each(function(i) {
// classNameArr.push($(this).attr("class"))
// })
// 將散的語句進行合併
var classNameArr = (function() {
var temp = [];
$("li").each(function(i) {
temp.push($(this).attr("class"))
})
return temp;
})();
console.log(classNameArr);
$("#rightBtn").click(function() {
// 防流氓
if ($("li").is(":animated")) {
return;
}
// 讓.noX 運動到.noX - 1的位置
for (var i = 1; i < 7; i++) {
$(".no" + i).animate(JSONARR[i - 1], 600);
}
// 爲了類名相統一， 我們決定輪換類名，
// 將數組的最後一位刪除放到數組的第一位
classNameArr.unshift(classNameArr.pop());
// console.log(classNameArr);
// 體現在元素身上
$("li").each(function(i) {
$(this).attr("class", classNameArr[i]);
})
// 由於.no6 是由waiting display: none 變來的
// 爲了防止出現bug 我們強制給no6添加行內樣式
$(".no6").css(JSONARR[6]);
})
// 左按鈕點擊事件
$("#leftBtn").click(function() {
// 防流氓
if ($("li").is(":animated")) {
return;
};
// 讓.noX 運動到 .noX + 1的位置
for (var i = 0; i < 6; i++) {
$(".no" + i).animate(JSONARR[i + 1], 600);
}
// 爲了類名相統一，我們要輪換類名
// 將數組的第一位刪除放入數組的最後一位
classNameArr.push(classNameArr.shift());
// console.log(classNameArr);
// 遍歷所有的li
$("li").each(function(i) {
$(this).attr("class", classNameArr[i]);
})
// 由於.no0 是由waiting display: none 變來的
// 爲了防止出現bug 我們強制給no0添加行內樣式
$(".no0").css(JSONARR[0]);
})
</script>
</body>
</html>
提示：
所需素材已經上傳到資源中，需要的同學可以下載，學會做題的思路，才能更好的吸收知識。