js实现简单的轮播图效果-蒲公英云

js实现简单的轮播图效果

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

<div class="top" id="top">
                <ul id="imgs">
                    <li><img src="images/banner_1.jpg" alt=""></li>
                    <li><img src="images/banner_2.png" alt=""></li>
                    <li><img src="images/banner_3.png" alt=""></li>
                    <li><img src="images/banner_4.png" alt=""></li>
                    <li><img src="images/banner_5.png" alt=""></li>
                    <li><img src="images/banner_6.png" alt=""></li>
                    <li><img src="images/banner_7.png" alt=""></li>
                </ul>
                <ol id="oo">
                </ol>
                <a href="#" class="l" id="left"><</a>
                <a href="#" class="r" id="right">></a>
</div>

js：

<script src="common.js"></script>
<script>
    var scrren = my$("top");//相框
    var imgWidth = scrren.offsetWidth;//相框的宽度
    var ulObj = my$("imgs");//ul
    var list = my$("imgs").getElementsByTagName("li");//所有的li的节点
    var olObj = my$("oo");//ol
    var btnL = my$("left");//左右两边按钮的盒子
    var btnR = my$("right");//左右两边按钮的盒子
    var index = 0;
    //1.创建小按钮。 根据小按钮, 切换对应的图片
    for(var i = 0 ; i < list.length; i++){
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        liObj.setAttribute("index", i);
        liObj.onmouseover = function () {
            for(var j = 0 ; j < olObj.children.length ; j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className = "current";
            //获取对应的索引
            var picIndex = this.getAttribute("index");
            animateBian(ulObj, -picIndex * imgWidth);
            index = this.getAttribute("index");
        }
    }
    olObj.firstElementChild.className = "current";
    //2.自动播放
    //克隆一个ul的第一个图片, 添加到最后面去
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timer = setInterval(move, 1000);
    index = 0;
    function move() {
        if(index >= list.length-1){
            //直接跳转到第一个图片
            index = 0;
            ulObj.style.left = "0px";
        }
        index++;
        animateBian(ulObj, -index * imgWidth);
        //先干掉所有的li的背景颜色
        for(var j = 0 ; j < olObj.children.length ; j++){
            olObj.children[j].removeAttribute("class");
        }
        //判断小圆点
        if(index == list.length -1){
            olObj.children[0].className = "current";
        }else{
            olObj.children[index].className = "current";
        }
    };
    //3.鼠标移入移出
    my$("top").onmouseover = function () {
        clearInterval(timer);
    }
    my$("top").onmouseout = function () {
        timer = setInterval(move, 1000);
    }
    //4.点击两边按钮
    my$("right").onclick = function (){
        move();
        return false;
    }
    my$("left").onclick = function () {
        if(index == 0){
            index = list.length - 1;
            ulObj.style.left = -index * imgWidth + "px";
        }
        index--;
        animateBian(ulObj, -index * imgWidth);
        //先干掉所有的li的背景颜色
        for(var j = 0 ; j < olObj.children.length ; j++){
            olObj.children[j].removeAttribute("class");
        }
        olObj.children[index].className = "current";
        return false;
    }
</script>

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” 是我们对圆点添加的自定义属性，到这里就实现了简单的效果了。
新手总结，如有错误，请各位多提意见！