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

至此，完成轮播图效果。