简单说说轮播图的做法

今天给大家讲的是轮播图的做法，轮播图的思路就是最外边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);
}

简单说说轮播图的做法

推荐阅读更多精彩内容