js 轮播图中点击小圆圈图片跳到指定图片

html代码(部分)

<div class="w">
    <div class="main">
        <!--焦点图模块-->
        <div class="focus fl">
            <a href="javascript:;" class="arrow-l"><</a>
            <a href="javascript:;" class="arrow-r">></a>
            <ul>
                <li>
                    <img src="upload/focus1.jpg" alt="">
                </li>
                <li>
                    <img src="upload/focus1.jpg" alt="">
                </li>
                <li>
                    <img src="upload/focus1.jpg" alt="">
                </li>
                <li>
                    <img src="upload/focus1.jpg" alt="">
                </li>
                <li>
                    <img src="upload/focus1.jpg" alt="">
                </li>
            </ul>
<!--            小圆圈-->
            <ol class="circle">
                <!--//js动态生成-->
            </ol>
        </div>
    </div>
</div>

javascript代码部分

var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle')
    var focusWidth = focus.offsetWidth;
    for (var i = 0; i < ul.children.length; i++) {
        //创建一个li
        var li = document.createElement('li');
        //记录当前小圆圈的索引号
        li.setAttribute('index', i);
        //把li放到ol里
        ol.appendChild(li);
        //为小圆圈添加点击事件
        li.addEventListener('click', function () {
            //干掉所有人
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //留下我自己
            this.className = 'current';
            //点击圆圈，移动图片，移动的时ul
            //移动的距离是圆圈的索引号乘以图片宽度（负值）
            var index = this.getAttribute('index');
            animate(ul, index * focusWidth * -1);
        })
    }
    //把ol里面的第一个li的类名设置为current
    ol.children[0].className = 'current';

css代码(部分)

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
    /*background-color: pink;*/
}

.focus {/*焦点图*/
    position: relative;
    width: 720px;
    height: 455px;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 900%;
    z-index: -1;
}
.focus ul li{
    float: left;
}
.arrow-l,
.arrow-r{
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0,0,0,.3);
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    font-family: icomoon;
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(255,255,255,0.5);
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;
}

.current {
    background-color: #ffffff;
}