demo 最简单的焦点轮播图

<style>
        *{ padding:0; margin:0; list-style:none; border:0;}
        .box{
            width:640px;
            height:310px;
            padding:7px;
            border:1px solid #ccc;
            margin:100px auto;
            position:relative;
        }
        .screen{
            width:640px;
            height:310px;
            overflow:hidden;
            position:relative;
        }
        .screen li{
            width:640px; height:310px;
            overflow:hidden;
            float:left;
        }
        .screen ul{
            position:absolute;
            left:0; top:0;
            width:4000px;
        }
        .box ol{
            position:absolute;
            right:10px; bottom:10px;
            line-height:20px; text-align:center;
        }
        .box ol li{
            float:left; width:20px; height:20px;
            background:#fff;
            border:1px solid #ccc;
            margin-left:10px; cursor:pointer;
        }
        .box ol li.current{
            background:pink;
        }
    </style>

<div class="box" id="box">
    <div class="screen">
        <ul id="ul">
            <li>![](images/0.large.JPG)</li>
            <li>![](images/1.large.jpg)</li>
            <li>![](images/2.large.jpg)</li>
            <li>![](images/3.large.JPG)</li>
            <li>![](images/4.large.JPG)</li>
        </ul>
    </div>
</div>

<script>
    // 封装动画函数
    function animate(obj,target){
        clearInterval(obj.timer);
        var speed = obj.offsetLeft - target <0 ? 10 : -10;
        obj.timer = setInterval(function(){
            var result = target - obj.offsetLeft;
            if(Math.abs(result)<=10){
                clearInterval(obj.timer);
                obj.style.left = target + "px";
            }else{
                obj.style.left = obj.offsetLeft + speed + "px";
            }
        },20)
    }

    //  得到id 创建ol
    var box = document.getElementById("box");
    var ul = document.getElementById("ul");
    var ulis = ul.children;
    ul.appendChild(ulis[0].cloneNode(true));
    var ol = document.createElement("ol");
    box.appendChild(ol);

    // 遍历得到焦点
    for(var i = 0;i<ulis.length-1;i++){
        var li = document.createElement("li");
        li.innerHTML = i+1;
        ol.appendChild(li);
    }
    ol.children[0].className = "current";

    // 执行点击轮播动画
    var olls = ol.children;
    for(var i = 0;i < olls.length;i++){
        olls[i].index = i;
        olls[i].onclick = function(){
            for(var j = 0;j<olls.length;j++){
                olls[j].className = "";
            }
            this.className = "current";
            animate(ul,this.index*-640);

        }
    }


    //  执行自动轮播动画
    var timer = null;
    var key = 0;    //  表示显示的张数
    var sq = 0 ; // 焦点
    timer = setInterval(fun,3000);
    function fun(){
        key++;  //先让播放张数++
        if(key>ulis.length-1){   //然后判断
            ul.style.left = "0px";  //迅速返回
            key = 1;  //因为第五张就是第一张，所以这时候，播放完第五章就播放第二张
        }
        animate(ul,key * -640);     //执行动画函数

        sq++;
        if(sq>olls.length-1){
            sq = 0;
        }
        for(var i = 0;i<olls.length;i++){
            olls[i].className = "";       //先全部清除class
        }
        olls[sq].className = "current";    //给当前的小圆点赋值class
    }
    box.onmouseover = function(){
        clearInterval(timer);
    };
    box.onmouseout = function(){
        timer = setInterval(fun,3000);
    }


</script>