怎么用原生JS实现简单的轮播图效果
本篇内容主要讲解“怎么用原生JS实现简单的轮播图效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用原生JS实现简单的轮播图效果”吧!
实现效果：
功能需求：
鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
点击右侧按钮一次，图片往左播放一张，左侧按钮同理。
图片播放的同时，下面的小圆圈模块也跟随一起变化。
鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。
轮播图向右移动的时候要用到缓动画的函数，具体见博客：JS实现添加缓动画的方法
（1）布局：轮播图部分的图片用ul进行布局，里面的每个li放a标签，a标签里面再放img；ul需要采用定位，目的是为了后面使用缓动画（要使用缓动画必须有定位），然后ul里面的li都浮动起来在一行显示，ul的宽度可以设置成轮播图宽度的600%（这里只要比400%大就可以，因为这里放的是四张轮播图），然后给轮播图模块设置overflow:hidden就只会展示一张图片了。下面小圆点采用绝对定位，左右两边按钮也采用绝对定位。
（2）功能1：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
非常简单，就是给轮播图模块添加mouseenter和mouseleave事件即可。
（3）功能2：根据图片张数动态添加小圆点
通过获得ul里面li的个数来判断一共需要添加多少个小圆点，但是这里要注意，因为后面需要实现轮播图效果，所以最后一张图片放的第一张图片，相当于会比原本的图片多一张，所以这里小圆点生成的个数是图片张数减一，通过document.createElement('li')创建小圆点，然后通过appendChild添加到小圆点列表中。
（4）功能3：点击右侧按钮一次，图片往左播放一张，左侧按钮同理。
这个功能是最复杂的功能，这个功能做好了，后面的自动播放功能就很简单了，那么现在来说说这个功能的思路：
（5）功能4：图片播放的同时，下面的小圆圈模块也跟随一起变化。
再声明一个变量circle，点击一次按钮，自增1，然后这个变量对应小圆点坐标，把当前坐标的小圆点的类改为current（即变色）,但是要注意，在滚动到最后一张图片的时候，因为ul会快速不做动画跳到最左侧，同时把num设置为0，然后再进行num++执行滑动到第二张图片，相当于这一次点击操作执行了两个步骤：滑动到最左侧同时执行缓动画移动到第二张图片，这样看起来就会很顺畅，看起来像是从最后一张图片滚动到第一张图片。但是小圆点并没有最后一张图的坐标，也就是小圆点数量和图片数量并不是相等的，这样就会导致当滑动到最后一张图片（与第一张图片相同的那张图片）的时候小圆点一个都没有选中，所以需要提前判断是否滑动到最后一张，要是滑动到最后一张就把最后一个小圆点的类设置成current。
（6）功能5：点击小圆圈，可以播放相应的图片。
这个功能采用给小圆圈设置自定义属性实现。
（7）功能6：鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。
这个功能其实就是鼠标离开的时候手动调用点击右边按钮的函数，放上去的时候就清除定时器即可。
完整代码如下：
<!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>轮播图</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; } .w { overflow: hidden; position: relative; width: 720px; height: 454px; margin: 200px auto; } ul li { list-style: none; } .main .focus ul { position: absolute; left: 0; top: 0; width: 600%; } .main .focus ul li { float: left; } .main .focus ul li img { width: 720px; } a[class^='arrow'] { display: none; z-index: 1; position: absolute; cursor: pointer; width: 30px; height: 50px; color: #fff; text-align: center; line-height: 50px; font-weight: 700; background-color: rgba(0, 0, 0, .3); } .arrow-left { left: 0; top: 50%; transform: translateY(-50%); } .arrow-right { right: 0; top: 50%; transform: translateY(-50%); } .main .focus ol { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; border-radius: 15px; background-color: rgba(255, 255, 255, .5); } .main .focus ol li { cursor: pointer; float: left; margin: 6px 6.5px; list-style: none; width: 15px; height: 15px; border-radius: 50%; background-color: #fff; } .main .focus .current { background-color: #f76211; } </style></head> <body> <div class="main w"> <div class="focus"> <!-- 左边按钮 --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-left"><</a> <!-- 右边按钮 --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-right">></a> <!-- 轮播图部分 --> <ul> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="lazy" data-src="../upload/focus.jpg" alt=""></a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="lazy" data-src="../upload/focus1.jpg" alt=""></a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="lazy" data-src="../upload/focus2.jpg" alt=""></a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="lazy" data-src="../upload/focus3.jpg" alt=""></a> </li> <!-- 这一张的作用是为了后面做无缝链接 --> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img class="lazy" data-src="../upload/focus.jpg" alt=""></a> </li> </ul> <!-- 下面小圆点部分 --> <ol class="circle"> </ol> </div> </div></body><script> // 滑动函数 function moves(obj, target, callback) { window.clearInterval(obj.timer); obj.timer = window.setInterval(function() { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { window.clearInterval(obj.timer); if (callback) { callback(); } } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 15) } // 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏 var focusing = document.querySelector('.focus'); // 获取左箭头 var arrowleft = document.querySelector('.arrow-left'); // 获取右箭头 var arrowright = document.querySelector('.arrow-right'); var ul = document.querySelector('ul'); // 获得图片张数 var len = ul.children.length; // 动态生成下面的小圆点 var ol = document.querySelector('ol'); for (var i = 0; i < len - 1; i++) { var newcircle = document.createElement('li'); ol.appendChild(newcircle); } // 把ol里面的第一个li的类名设置成current ol.children[0].className = 'current'; // 收移动到focus的时候显示箭头 focusing.addEventListener('mouseenter', function() { // 鼠标移动到图片的时候清除定时器 window.clearInterval(timer); timer = null; arrowleft.style.display = 'block'; arrowright.style.display = 'block'; }) // 鼠标离开又隐藏 focusing.addEventListener('mouseleave', function() { // 鼠标离开又重新设置定时器 // 自动播放轮播图 timer = window.setInterval(function() { // 手动调用点击事件 arrowright.click(); }, 2000) arrowleft.style.display = 'none'; arrowright.style.display = 'none'; }) // 给每个小圆点设置自定义属性 for (var i = 0; i < len - 1; i++) { ol.children[i].setAttribute('index', i); } // 点击哪个小圆圈哪个小圆圈就变色 -排他思想 for (var i = 0; i < len - 1; i++) { ol.children[i].addEventListener('click', function() { for (var j = 0; j < len - 1; j++) { ol.children[j].className = ''; } // 点击第几个小圆点ul就移动小圆点坐标乘以图片宽度 // alert(-(this.getAttribute('index') * ul.children[0].offsetWidth)); moves(ul, -this.getAttribute('index') * ul.children[0].offsetWidth) num = this.getAttribute('index'); circle = this.getAttribute('index'); this.className = 'current'; // ul.style.left = "-720px"; }) } // 点击右边箭头 设置一个num进行移动距离 var num = 0; // 点击右边的箭头小圆圈也变色 var circle = 0; arrowright.addEventListener('click', function() { if (num == len - 1) { ul.style.left = 0; num = 0; circle = 0 } num++; moves(ul, -num * ul.children[0].offsetWidth); circle++; for (var i = 0; i < len - 1; i++) { ol.children[i].className = ''; } // 在加到最后一张重复图片的时候就把第一个圆点变色 if (circle == len - 1) { // alert('haha') ol.children[0].className = 'current'; } ol.children[circle].className = 'current'; }) // 点击左边箭头 arrowleft.addEventListener('click', function() { if (num == 0) { num = len - 1; ul.style.left = -num * ul.children[0].offsetWidth; circle = len - 1; } num--; moves(ul, -num * ul.children[0].offsetWidth); circle--; for (var i = 0; i < len - 1; i++) { ol.children[i].className = ''; } // 在减到最后一张重复图片的时候就把第一个圆点变色 if (circle == 0) { // alert('haha') ol.children[0].className = 'current'; } ol.children[circle].className = 'current'; }) // 自动播放轮播图 var timer = window.setInterval(function() { // 手动调用点击事件 arrowright.click(); }, 2000)</script> </html>到此，相信大家对“怎么用原生JS实现简单的轮播图效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
