今天给大家讲的是轮播图的做法，轮播图的思路就是最外边div的边框把超出的部分隐藏，中间的div给出所有图片加起来的宽度，如果是浮动的话，直接图片的宽度*张数+1，不是的话，要预留他们的距离，小的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>
第五张图片是用来做无缝轮播使用的，当图片运行到第五张图片的时候，把他的位置强制变成第一张
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动画的函数参数
var startT = 0;
var endT = 30;
var startP = parseInt(div.style.marginLeft) || 0;
var endP = num*(-200)-startP;
//添加定时器做tween动画(针对每一张图片)
var smallTimer = setInterval(function(){
//每次动画结束清除定时器
if (startT >= endT) {
clearInterval(smallTimer);
//在动画结束的一瞬间，判断是否是最后一张图片，如果是，跳到第一张
if(num == 4){
num = 0;
div.style.marginLeft = '0px';
}
}else{
div.style.marginLeft=Tween.Bounce.easeIn(startT,startP,endP,endT)+'px';
}
startT++;
},30);
}
网友评论