使用原生JavaScript实现轮播图

首先我们整理一下轮播图的实现规则，使用绝对定位设置left值的方式
1、没有点击时，图片会自动向后循环翻转
2、鼠标放在图片上，停止自动循环
3、鼠标移开时回复自动循环
4、点击上一页的时候，图片停止自动循环，图片向右移动 left+imgWidth，当移动到第一个图片时再点击上一页直接跳到最后一页，点击结束后恢复自动循环
5、点击下一页的时候，图片停止自动循环，图片向左移动 left-imgWidth，当移动到最后一个图片时再点击下一页跳转到第一页，点击结束后恢复自动循环

然后上代码

index.html

<div id="showDiv">
        <img src="image.jpg" alt="The Photo" id="showImg" />
    </div>
    <div class="btn">
        <input id="btnF" type="button" value="上一页"/>
        <input id="btnR" type="button" value="下一页"/>
    </div>

style.css

#showDiv{
    width: 200px;
    height: 230px;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px auto;
    position: relative;
}
#showImg{
    width: 600px;
    position: absolute;
}
.btn{
    width: 200px;
    margin:0 auto;
}
#btnF{
    float: left;
}
#btnR{
    float: right;
}

script.js

/*共享load*/
function addLoadEvent(fun){
    var oldLoad = window.onload;
    if(typeof  oldLoad != "function"){
        window.onload = fun;
    }else{
        window.onload = function(){
            oldLoad();
            fun();
        }
    }
}

function getElement(){
    /*获取img*/
    var img = document.getElementById("showImg");
    /*获取按钮*/
    var up = document.getElementById("btnF");
    var down = document.getElementById("btnR");
    /*获取Left和Top*/
    var left = parseInt(img.style.left);
    if(!left){
        left = 0;
    }
    /*自动执行*/
     img.goUp = setInterval(function(){
        if(left == 0){
            left = -400;
        }else{
            left = left + 200;
        }
        img.style.left = left + "px";
    },2000);
    /*当鼠标在图片上 停止*/
    img.onmouseover = function(){
        clearInterval(img.goUp);
    };
    /*当鼠标移开时 继续*/
    img.onmouseout = function(){
        if(img.goUp){
            clearInterval(img.goUp);
        }
        img.goUp = setInterval(function(){
            if(left == 0){
                left = -400;
            }else{
                left = left + 200;
            }
            img.style.left = left + "px";
        },2000);
    };
    /*goUp("showImg",left);*/
    /*绑定事件*/
    up.onclick = function(){
        /*点击时停止动画*/
        clearInterval(img.goUp);
        if(left == 0){
            left = -400;
        }else{
            left = left + 200;
        }
        img.style.left = left + "px";
        /*恢复*/
        if(img.goUp){
            clearInterval(img.goUp);
        }
        img.goUp = setInterval(function(){
            if(left == 0){
                left = -400;
            }else{
                left = left + 200;
            }
            img.style.left = left + "px";
        },2000);
    };
    down.onclick = function () {
        /*点击时停止自动*/
        clearInterval(img.goUp);
        if(left == -400){
            left = 0;
        }else{
            left = left-200;
        }
        img.style.left = left + "px";
        /*恢复*/
        if(img.goUp){
            clearInterval(img.goUp);
        }
        img.goUp = setInterval(function(){
            if(left == 0){
                left = -400;
            }else{
                left = left + 200;
            }
            img.style.left = left + "px";
        },2000);
    };
}

addLoadEvent(getElement);

至此，完成轮播图效果。