使用js实现轮播图

先上效果

原理，html布局分为内容页部分，分页部分，有5个内容页对应5个分页小球；

有一个最外层的盒子大小为图示大小，里面的盒子，宽度要远大于外层盒子的宽度，因为这个盒子要存放所有采取float布局的内容页，float布局会使所有内容页都排在一行，通过父盒子的overflow：hidden属性，隐藏超出外层盒子的部分；点击分页小球，里面的内容页反向移动相应距离 ，当然页面移动需要动画效果才不会显得生硬，需要自己封装了一个js函数缓动动画。

html布局

<div class="wrapper">
    <div class="inner">
        <ul>
            <li>页面1</li>
            <li>页面2</li>
            <li>页面3</li>
            <li>页面4</li>
            <li>页面5</li>
        </ul>
        <div class="circle">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>

js部分代码

//获取页面元素
    var ul = document.getElementsByTagName("ul")[0];
    var inner = document.getElementsByClassName("inner")[0];
    var circle = document.getElementsByClassName("circle")[0];
    var spanArr = circle.children;

    for(var i = 0;i<spanArr.length;i++){
        //给每个span绑定index，为了和ul中的页面联动
        spanArr[i].index = i;
        var innerWidth = inner.offsetWidth;
        spanArr[i].onmouseover = function () {
            //点击分页小球，添加current类，current类定义了小球的背景颜色
            for (var j = 0; j<spanArr.length ;j++) {
                spanArr[j].className = "";
            }
            this.className = "current";
            //调用缓动函数，传入参数：移动元素，移动距离
            animation(ul,-this.index*innerWidth);
        }
    }

    //封装缓动动画函数
    function animation(ele,target) {
        clearInterval(ele.timer);
        ele.timer=setInterval(function () {
            //获取起使位置
            leader= ele.offsetLeft;
            //获取缓动动画步长
            var step = (target-leader)/10;
            //支持不同方向的移动，所以步长有正有负
            step = step >0? Math.ceil(step):Math.floor(step);
            //当前位置= 盒子的位置+步长
            leader = leader +step;
            ele.style.left = leader+"px";
            if(ele.offsetLeft === target) {
                clearInterval(ele.timer);
            }
        },10)
        
    }