爱站程序员基地本文实例为大家分享了JavaScript实现简单的轮播图的具体代码，供大家参考，具体内容如下
js轮播图实现思路
1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 animate 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件
html代码部分
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\" href=\"css/index.css\" ><script src=\"js/index.js\"></script></head><body><div class=\"focus\"><a href=\"javascript:;\" class=\"arrow_r\">></a><a href=\"javascript:;\" class=\"arrow_l\"><</a><ul><li><a href=\"\"><img src=\"images/focus.jpg\" alt=\"\"></a></li><li><a href=\"\"><img src=\"images/focus1.jpg\" alt=\"\"></a></li><li><a href=\"\"><img src=\"images/focus2.jpg\" alt=\"\"></a></li><li><a href=\"\"><img src=\"images/focus3.jpg\" alt=\"\"></a></li></ul><ol class=\"circle\"></ol></div></body></html>
css样式部分
* {padding: 0;margin: 0;}li {list-style: none;}img {border: 0;vertical-align: top;}a {text-decoration: none;}.focus {position: relative;width: 721px;height: 455px;margin: 100px auto;overflow: hidden;}.focus ul {position: absolute;top: 0;left: 0;width: 600%;}.focus ul li {float: left;}.arrow_r,.arrow_l {display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 24px;background: rgba(0, 0, 0, .2);color: #fff;z-index: 1;}.arrow_r {right: 0;}.circle {position: absolute;bottom: 10px;left: 50px;}.circle li {float: left;width: 8px;height: 8px;border: 2px solid rgba(255, 255, 255, .5);border-radius: 50%;margin: 0 3px;cursor: pointer;}.current {background-color: #fff;}
javascript部分
window.addEventListener(\'load\', function() {//获取元素var focus = document.querySelector(\'.focus\');var arrow_r = document.querySelector(\'.arrow_r\');var arrow_l = document.querySelector(\'.arrow_l\');var focusWidth = focus.offsetWidth;// 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播focus.addEventListener(\'mouseenter\', function() {arrow_r.style.display = \'block\';arrow_l.style.display = \'block\';clearInterval(timer);timer = null;});focus.addEventListener(\'mouseleave\', function() {arrow_r.style.display = \'none\';arrow_l.style.display = \'none\';timer = setInterval(function() {//调用点击事件arrow_r.click();}, 2000);});//动态生成小圆圈var ul = focus.querySelector(\'ul\');var ol = focus.querySelector(\'.circle\');for (var i = 0; i < ul.children.length; i++) {var li = document.createElement(\'li\');li.setAttribute(\'index\', i);ol.appendChild(li);//小圆圈点击事件li.addEventListener(\'click\', function() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = \'\';}var index = this.getAttribute(\'index\');num = index;circle = index;this.className = \'current\';animate(ul, -index * focusWidth);})}ol.children[0].className = \'current\';//克隆第一张图片放到最后一张var fis = ul.children[0].cloneNode(true);ul.appendChild(fis);//右侧按钮点击事件var num = 0;var circle = 0;arrow_r.addEventListener(\'click\', function() {if (num === ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animate(ul, -num * focusWidth);circle++;if (circle === ul.children.length - 1) {circle = 0;}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = \'\';}ol.children[circle].className = \'current\';});//左侧按钮点击事件arrow_l.addEventListener(\'click\', function() {if (num == 0) {num = ul.children.length - 1;ul.style.left = -num * focusWidth + \'px\';}num--;animate(ul, -num * focusWidth);circle--;circle = circle < 0 ? ol.children.length - 1 : circle;// 调用函数circleChange();});//清除其余小圆圈的current类名function circleChange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = \'\';}// 留下当前的小圆圈的current类名ol.children[circle].className = \'current\';}//动画函数function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearInterval(obj.timer);callback && callback();}obj.style.left = obj.offsetLeft + step + \'px\';}, 15);}//自动轮播放轮播图var timer = setInterval(function() {//调用点击事件arrow_r.click();}, 2000);});
以上就是本文的全部内容，希望对大家的学习有所帮助
您可能感兴趣的文章:
- js实现轮播图的完整代码
- 原生js实现轮播图的示例代码
- js实现支持手机滑动切换的轮播图片效果实例
- js实现点击左右按钮轮播图片效果实例
- JS轮播图实现简单代码
- JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
- JS实现左右无缝轮播图代码
- 原生js实现无限循环轮播图效果
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 基于vue.js轮播组件vue-awesome-swiper实现轮播图
