使用原生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);

至此，完成轮播图效果。