js实现简单的轮播图效果

现在大多数网站都会在页面做一个轮播效果，看着舒服，同样的内容能展示更多的内容，很方便，我在今天接触到了这个无缝轮播图，在一番调试下总算是简单实现了效果，不多说，上代码
html：

                

                    

                    

                    

                    

                    

                    

                    

                
                


                
                <
                >

js：

common.js

//变速的动画
function animateBian(element,target) {
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;
        var step =(target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        if (Math.abs(target - current) > Math.abs(step)){
            element.style.left = current + "px";
        } else{
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    },50);
}
// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

这个common.js 是我在学习中不断完善的一个自用的js文件，这里只放了上边代码所用到的。效果这里不做描述，刚开是写完的时候没发现什么问题，在多次实验后发现在鼠标移入原点移到指定图片，鼠标移出图片框之后，轮播还是从之前自动轮播停止的位置开始继续，在我看来这是一个瑕疵（反正我看着不舒服），那怎么办呢？
这个情况是因为鼠标移入到原点，图片是移动了，但是所对应的index值并没有发生变化，还是自动轮播停止时的值，所以就需要我们去给index进行赋值，使它符合当前图片所对应的index，在liObj.onmouseover 中加入一句index = this.getAttribute(“index”); 这里“=”前的index是我们定义的全局变量，而后边方法中的 “index” 是我们对圆点添加的自定义属性，到这里就实现了简单的效果了。
新手总结，如有错误，请各位多提意见！