目录
前言
轮播图的组成以及实现思想
左右按钮的隐藏与显示
核心思想
代码实现
动态生成底部小圆圈
核心思想
代码实现
右左按钮实现
核心思想
代码实现
实现自动播放
核心思想
代码实现
整体代码（复制可用）
总结
前言
常见的轮播图有两种：移动距离轮播图和渐变切换轮播图，但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换，下面有渐变轮播图的效果展示图。
轮播图的组成以及实现思想
轮播图的组成图
左右按钮的隐藏与显示
核心思想
box（装整个轮播图的盒子）获得焦点的时候按钮style.display属性改为block失去焦点none。
代码实现
//获取焦点显示box.addEventListener('mouseenter', function () {right.style.display = 'block';left.style.display = 'block';});//失去焦点隐藏box.addEventListener('mouseleave', function () {right.style.display = 'none';left.style.display = 'none';});
动态生成底部小圆圈
核心思想
图片的数量动态生成小圆圈的数量，实现灵活控制。根据ul里的li的长度得到小圆圈的数量。
代码实现
for (var i = 0; i < ul_lis.length; i++) {var li = document.createElement('li');li.className = 'current';//current类是样式ol.appendChild(li);//添加注册事件 排他思想li.addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}this.className = 'current white';var index = this.getAttribute('index');num = index;circle = index;});}ol.children[0].className = 'current white';//默认第一个为白色底
右左按钮实现
核心思想
给ol添加一个index属性，以便于获取当前属于第几张图片（ol 和 ul 里面的 li 数量是一致的）。给左按钮添加一个点击事件，根据num（num由index赋值过来）跳转下一张图；设置flag（节流阀）保证是一次跳转完成之后才可以实现下一次的跳转。
代码实现
//TRUE 深拷贝 复制内容且复制标签var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。right.addEventListener('click', function () {if (flag) {flag = false;if (num == ul.children.length - 1) {num = 0;}num++;if (num == 4) { num = 0; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//变量控制小圆圈的变化circle++;if (circle == ol.children.length) {circle = 0;}circlechange();}});left.addEventListener('click', function () {if (flag) {flag = false;//实现无缝滚动if (num == 0) {num = ul.children.length - 1;}num--;if (num == -1) { num = 4; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//一次只执行完毕才可以点击下一次//变量控制小圆圈的变化circle--;if (circle < 0) {circle = ol.children.length - 1;}circlechange();}});});function circlechange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}ol.children[circle].className = 'current white';};
实现自动播放
核心思想
定时器实现，默认是显示下一张右边的图。每隔一段时间，往右一下。鼠标放在box上清除定时器，移开启动定时器。
代码实现
box.addEventListener('mouseenter', function () {clearInterval(timer);timer = null;});box.addEventListener('mouseleave', function () {timer = setInterval(function () {right.click();}, 2000);});var timer = setInterval(function () {right.click();}, 2000);
整体代码（复制可用）
<!DOCTYPE html><html lang="zn"><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><script>window.addEventListener('load', function () {var box = document.querySelector('.box');var right = box.querySelector('.right');var left = box.querySelector('.left');var ul = box.querySelector('ul');var ul_lis = ul.querySelectorAll('li');var ol = box.querySelector('ol');var num = 0;var circle = 0;var flag = true;// 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮。box.addEventListener('mouseenter', function () {right.style.display = 'block';left.style.display = 'block';clearInterval(timer);timer = null;});box.addEventListener('mouseleave', function () {right.style.display = 'none';left.style.display = 'none';timer = setInterval(function () {right.click();}, 2000);});var timer = setInterval(function () {right.click();}, 2000);//2.动态生成小圆圈 for (var i = 0; i < ul_lis.length; i++) {var li = document.createElement('li');li.className = 'current';li.setAttribute('index', i);ol.appendChild(li);//添加注册事件 排他思想li.addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';//排他思想：全部图片设置为透明ol.children[i].className = 'current';}this.className = 'current white';var index = this.getAttribute('index');ul_lis[index].style.opacity = '1';//留下需要显示的图片num = index;circle = index;});}ol.children[0].className = 'current white';//TRUE 深拷贝 复制内容且复制标签var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。right.addEventListener('click', function () {if (flag) {flag = false;if (num == ul.children.length - 1) {num = 0;}num++;if (num == 4) { num = 0; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//变量控制小圆圈的变化circle++;if (circle == ol.children.length) {circle = 0;}circlechange();}});function circlechange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}ol.children[circle].className = 'current white';};left.addEventListener('click', function () {if (flag) {flag = false;//实现无缝滚动if (num == 0) {num = ul.children.length - 1;}num--;if (num == -1) { num = 4; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//一次只执行完毕才可以点击下一次//变量控制小圆圈的变化circle--;if (circle < 0) {circle = ol.children.length - 1;}circlechange();}});});</script><style>* {margin: 0px;padding: 0px;list-style: none;}.box {position: relative;width: 810px;height: 540px;left: 50%;transform: translateX(-50%);}img {width: 810px;height: 540px;}ul li {position: absolute;top: 0px;left: 0px;opacity: 0;transition: 1s;}ul li:first-child {opacity: 1;}ul {width: 100%;position: absolute;top: 0px;left: 0px;}span {width: 20px;height: 40px;font-size: 25px;line-height: 40px;display: block;position: absolute;color: black;background-color: #ccc;opacity: .5;text-align: center;top: 50%;transform: translateY(-50%);cursor: pointer;display: none;}.right {right: 0px;}.left {left: 0px;}ol {position: absolute;left: 50%;z-index: 999;transform: translateX(-50%);bottom: 5px;}.current {float: left;display: block;width: 25px;height: 5px;background-color: rgb(41, 39, 39);margin-right: 10px;opacity: 0.5;}.white {background-color: #fff;}</style></head><body><div class="box"><ul><li><img src="../img/1.jpg" alt=""></li><li><img src="../img/2.jpg" alt=""></li><li><img src="../img/3.jpg" alt=""></li><li><img src="../img/4.jpg" alt=""></li></ul><span class="right"> > </span><span class="left"> < </span><ol></ol></div></body></html>
总结
虽然现在很多时候轮播图可以直接板块套用，但是我们还是需要扎实的功底。毕竟学无止境！这里讲解的是大概的一个思路以及实现，轮播的大概思想 就是这个样子的。只是根据效果的不同需要稍微做一些修改啦~
