今天給大家講的是輪播圖的做法，輪播圖的思路就是最外邊div的邊框把超出的部分隱藏，中間的div給出所有圖片加起來的寬度，如果是浮動的話，直接圖片的寬度*張數(shù)+1，不是的話，要預(yù)留他們的距離，小的div向左邊移動。
閑話不多上，上代碼。
css部分：
/#wrap{width: 200px;overflow: hidden;}
.middle{width: 1100px;}
img{width: 200px;height: 300px;}
html部分：
<body>
<div id="wrap">
<div class="middle">
<img />
<img />
<img />
<img />
<img />
</div>
</div>
</body>
第五張圖片是用來做無縫輪播使用的，當(dāng)圖片運行到第五張圖片的時候，把他的位置強制變成第一張
JS部分：
<script src="tween/tween.js" charset="utf-8"></script>
<script type="text/javascript">
//1 獲取元素
var div = document.getElementsByClassName('middle')[0];
//2 定義所需變量
var num = 0;
//3 加定時器（隨時間滾動）
var timer = setInterval(fun,2000);
function fun(){
num++;
//定義四個變量作為tween動畫的函數(shù)參數(shù)
var startT = 0;
var endT = 30;
var startP = parseInt(div.style.marginLeft) || 0;
var endP = num*(-200)-startP;
//添加定時器做tween動畫(針對每一張圖片)
var smallTimer = setInterval(function(){
//每次動畫結(jié)束清除定時器
if (startT >= endT) {
clearInterval(smallTimer);
//在動畫結(jié)束的一瞬間，判斷是否是最后一張圖片，如果是，跳到第一張
if(num == 4){
num = 0;
div.style.marginLeft = '0px';
}
}else{
div.style.marginLeft=Tween.Bounce.easeIn(startT,startP,endP,endT)+'px';
}
startT++;
},30);
}