这篇文章主要介绍了使用JavaScript实现循环轮播图的案例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体内容如下
案例演示：
点击下面图标，图片进行轮播
2.图片轮播完，接着轮播到第一张
（代码内部具有详细解释）
项目结构图：
HTML代码：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>图片轮播示例</title> <link rel="stylesheet" href="css/lunbo.css" /> <script src="js/tools.js"></script> <script src="js/lunbo.js"></script></head><body> <!-- 外部容器 --> <div id="outer"> <!-- 图片列表 --> <ul id="img-list"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> <!-- 重复显示第一张图片，便于切入下一轮循环。 --> <li><img src="img/1.jpg" /></li> </ul> <!-- 导航按钮 --> <div id="nav-btns"> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> <a href="javascript:;" ></a> </div> </div></body></html>css代码：
* { margin: 0; padding: 0;}#outer { width: 520px; height: 333px; margin: 50px auto; background-color: orange; padding: 10px 0; position: relative; overflow: hidden;}#img-list { list-style: none; position: absolute; left: 0px;}#img-list li { float: left; margin: 0 10px;}#nav-btns { position: absolute; bottom: 15px;}#nav-btns a { float: left; width: 15px; height: 15px; background-color: red; margin: 0 5px; opacity: 0.5; filter: alpha(opacity=50);}#nav-btns a:hover { background-color: black;}lunbo.js代码
window.onload = function() { // 获取图片列表 var imgList = document.getElementById("img-list"); // 获取页面中所有的img标签 var imgArr = document.getElementsByTagName("img"); // 设置imgList的宽度 imgList.style.width = 520 * imgArr.length + "px"; // 设置导航按钮居中 // 获取导航按钮 var navBtns = document.getElementById("nav-btns"); // 获取outer var outer = document.getElementById("outer"); // 设置navBtns的left值 navBtns.style.left = (outer.offsetWidth - navBtns.offsetWidth) / 2 + "px"; // 默认显示图片的索引 var index = 0; // 获取所有的a var allA = document.getElementsByTagName("a"); // 设置默认选中的效果 allA[index].style.backgroundColor = "black"; // 为所有的超链接都绑定单击响应函数 for (var i = 0; i < allA.length; i++) { // 为每一个超链接都添加一个num属性 allA[i].num = i; // 为超链接绑定单击响应函数 allA[i].onclick = function() { // 关闭自动切换的定时器 clearInterval(timer); // 获取点击超链接的索引,并将其设置为index index = this.num; // 设置选中的a setA(); // 使用move函数来切换图片 move(imgList, "left", -520 * index, 20, function() { // 动画执行完毕，开启自动切换 autoChange(); }); }; } // 开启自动切换图片 autoChange(); // 设置选中的a function setA() { // 判断当前索引是否是最后一张图片 if (index >= imgArr.length - 1) { // 则将index设置为0 index = 0; // 此时显示的最后一张图片，而最后一张图片和第一张是一摸一样 // 通过CSS将最后一张切换成第一张 imgList.style.left = 0; } // 遍历所有a，并将它们的背景颜色设置为红色 for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = ""; } // 将选中的a设置为黑色 allA[index].style.backgroundColor = "black"; }; // 定义一个自动切换的定时器的标识 var timer; // 创建一个函数，用来开启自动切换图片 function autoChange() { // 开启一个定时器，用来定时去切换图片 timer = setInterval(function() { // 使索引自增 index++; // 判断index的值 index %= imgArr.length; // 执行动画，切换图片 move(imgList, "left", -520 * index, 20, function() { // 修改导航按钮 setA(); }); }, 3000); }};tool.js代码：
function move(obj, attr, target, speed, callback) { // 关闭上一个定时器 clearInterval(obj.timer); // 获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); // 判断速度的正负值 // 如果从0 向 800移动，则speed为正 // 如果从800向0移动，则speed为负 if (current > target) { //此时速度应为负值 speed = -speed; } // 开启一个定时器，用来执行动画效果 // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function() { // 获取box1的原来的left值 var oldValue = parseInt(getStyle(obj, attr)); // 在旧值的基础上增加 var newValue = oldValue + speed; // 判断newValue是否大于800 // 从800 向 0移动 // 向左移动时，需要判断newValue是否小于target // 向右移动时，需要判断newValue是否大于target if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } // 将新值设置给box1 obj.style[attr] = newValue + "px"; // 当元素移动到0px时，使其停止执行动画 if (newValue == target) { // 达到目标，关闭定时器 clearInterval(obj.timer); // 动画执行完毕，调用回调函数 callback && callback(); } }, 30);}function getStyle(obj, name) { if (window.getComputedStyle) { // 正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { // IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; }}function addClass(obj, cn) { // 检查obj中是否含有cn if (!hasClass(obj, cn)) { obj.className += " " + cn; }}function hasClass(obj, cn) { // 判断obj中有没有cn class // 创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className);}function removeClass(obj, cn) { // 创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); // 删除class obj.className = obj.className.replace(reg, "");}function toggleClass(obj, cn) { //判断obj中是否含有cn if (hasClass(obj, cn)) { //有，则删除 removeClass(obj, cn); } else { //没有，则添加 addClass(obj, cn); }}图片资源下面：
感谢你能够认真阅读完这篇文章，希望小编分享的“使用JavaScript实现循环轮播图的案例”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
