写在前面
是的，这个轮播图我看了一天的时间，网上找说明，外加请教别人，自己动手试着写写，昨天看了一下午，夜里又简单想了一下整个流程。终于今天上午开始动手写，磕磕绊绊，跌跌撞撞，完整的轮播让我给实现了。
总的来说，算是完成了，为啥要说算是呢，因为自己在独立地写的过程中还是会出现一些问题，就会看别人怎么写的，怎么实现的，再去对比一下自己的思路。遇到问题，思考问题，再到解决问题，是个需要不断重复的过程，只有这样，才会让自己熟练，时间长了，再遇到问题知道如何解决，从哪些地方去检查。
emmmmmmm，简单的学习心得分享完毕，开始撸思路，撸代码吧。
轮播图
轮播图功能需求：
1. 鼠标经过/离开轮播图时 左右按钮的显示/隐藏
2. 点击圆点时，圆度变为当前状态；图片切换
3. 左右按钮点击时，轮播图片
4. 图片轮播时 下方的圆点也跟着切换
5. 鼠标放上焦点图时 图片停止自动轮播 ； 鼠标离开时 图片自动轮播
需要注意的是，页面一开始图片就是轮播着的
优化的地方：
1. 增加节流阀：
当连续点击按钮时，一张图片没有轮播完就会出现下一张。增加的节流阀的目的就是解决上面所叙述的问题。一般节流阀就是两种操作，关闭节流阀(锁函数)，打开节流阀(开函数)。
2. 提取代码相同的部分，单独作为一个函数，进行调用。还有就是把一些简单的if语句的判断可以使用三元表达式来代替
无缝轮播的思想
无缝轮播的布局：把放轮播图的ul中的第一个孩子li，复制一份放到ul的最后。
轮播具体实现的过程：正常的话，用户点击按钮进行图片的轮播，当用户看到最后一张图片(其实是我们布局中的倒数第二张)时，点击右侧按钮的时候，用户看到的是第一张图片，其本质是用户看到了我们布局中的最后一张，因为这一张图是我们复制的第一张图，与此同时，我们悄悄的把ul瞬间回到原位置(left = 0)，制造假象，让用户以为是第一张图片，其实是我们布局中的最后一张。当用户再点击时，因为此时ul已经瞬间移回到原来的位置，再点击向右轮播的按钮，ul就按照正常的轮播到第二张图片。这样就实现了无缝轮播。
这是轮播图中比较重要的一个思想。思路解决了 ，咱们就看代码吧。
代码里面有很详细的解释，可以认真看看的。
JS部分
// 轮播图的需求：
// 1. 鼠标经过/离开轮播图时 左右按钮的显示/隐藏
// 2. 点击圆点时，圆度变为当前状态；图片切换
// 3. 左右按钮点击时，轮播图片
// 4. 图片轮播时 下方的圆点也跟着切换
// 5. 鼠标放上焦点图时 图片停止自动轮播 ； 鼠标离开时 图片自动轮播
// 需要注意的是，页面一开始图片就是轮播着的
window.addEventListener('load', function () {
// 1. 鼠标经过轮播图时 按钮的显示和隐藏
// 获取事件源
var focus = document.querySelector('.focus');
var arrowL = document.querySelector('.arrow-l');
var arrowR = document.querySelector('.arrow-r');
var ol = document.querySelector('.circle');
var ul = focus.querySelector('ul');
var focusWidth = focus.offsetWidth;
focus.addEventListener('mouseenter', function () {
arrowL.style.display = 'block';
arrowR.style.display = 'block';
clearInterval(carousel);
carousel = null;
})
focus.addEventListener('mouseleave', function () {
arrowL.style.display = 'none';
arrowR.style.display = 'none';
// 鼠标离开 自动轮播
carousel = setInterval(function () {
arrowR.click();
}, 3000)
})
// 2.点击圆点部分
// 圆点的个数应该是与图片的个数是一致的，所以 应该根据ul中的li的个数动态创建圆点的个数
// js需要写的具有一定的动态性 改变结构 时 js可以动态生成
for (var i = 0; i < ul.children.length; i++) {
// (1)创建圆点
var li = document.createElement('li');
// (2)添加到ol中
ol.appendChild(li);
// 设置一个变量 用来记录当前圆点的索引号 后面与图片位置对应显示
li.setAttribute('index', i);
// (3).点击圆点的事件效果 应该在创建之后就绑定事件
li.addEventListener('click', function () {
// (4).被点击的圆点 变成当前状态
// 干掉所有人 ol.children.length所有小圆点的个数
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下我自己 当前点击的圆点
this.className = 'current';
// (5). 点击时图片轮播
// 获得当前圆点的索引号
var currentIndex = this.getAttribute('index');
// 轮播到哪个li 把当前图片对应的圆点的索引号 给点击的次数
// 是保持圆点 按钮点击次数 图片对应一致
clickCount = currentIndex;
circleMove = currentIndex;
// ul移动的距离 圆点索引号*焦点图的宽度
animate(ul, -currentIndex * focusWidth);
})
}
// 默认设置第一个圆点为当前
ol.children[0].className = 'current';
// 无缝轮播：把ul中的图片复制一份到ul的最后。当用户点击到最后一张，就是我们的倒数第二张
// 用户再点击时 看到的是第一张的图片 其实是我们复制了第一张到ul的最后，所以用户看到的实际上是我们复制的那一张图
// 这时当用户再点击时 我们迅速把ul移回原位left=0，从头开始 再按照正常的轮播到第二张
// 克隆节点在创建小圆点的后面 因为克隆出来的节点不需要小圆点
// 复制ul第一个li放到最后 ul.children[0].cloneNode(true)深拷贝
var firstImg = ul.children[0].cloneNode(true);
ul.appendChild(firstImg);
// 点击按钮事件
// 点击右侧按钮 图片向左轮播 点击一次 图片(ul)移动一个图片的距离
// ul移动的距离 = 点击次数*焦点图的宽度 与上面点小圆点的效果类似
// 设置一个变量记录 点击的次数 点击一次图片滚动一次
var clickCount = 0;
// 记录圆点的位置 控制圆点的播放
var circleMove = 0;
// 节流阈值：为了防止点击过快图片没有轮播完就结束的情况
var flag = true;
// 3.右侧按钮点击
arrowR.addEventListener('click', function () {
if (flag) {
// 先锁住函数 当动画执行完毕之后 再解锁
flag = false; // 关闭节流阀
// (1) 当ul走到最后 我们复制的那一张图片时：ul的left = 0；迅速复原ul
if (clickCount == ul.children.length - 1) {
ul.style.left = 0;
clickCount = 0; // 点击置0
}
clickCount++;
animate(ul, -clickCount * focusWidth, function () {
flag = true; // 打开节流阀
});
// (2) 图片轮播时 圆点也在变化
circleMove++;
// 当圆点到最后一个4 也就是图片轮播到我们复制的哪一个图片时 圆点从头开始
if (circleMove == ol.children.length) {
circleMove = 0
}
// circleMove == ol.children.length - 1 ? 0 : circleMove;
// 调用函数 排他思想
circleVisible();
}
})
// 4.左侧按钮点击
arrowL.addEventListener('click', function () {
if (flag) {
flag = false;
// (1) 当ul是第一张图片时 点击时应轮播到倒数第二张
if (clickCount == 0) {
ul.style.left = -clickCount * focusWidth + 'px';
clickCount = ul.children.length - 1; // 点击数也回到图片对应的点击数
}
clickCount--;
animate(ul, -clickCount * focusWidth, function () {
flag = true;
});
// (2) 图片轮播时 圆点也在变化
circleMove--;
// 点击时 如果 circleMove < 0 说明是第一张图片 小圆点要从第4个开始 (索引号3)
if (circleMove < 0) {
circleMove = ol.children.length - 1
}
// circleMove < 0 ? ol.children.length - 1 : circleMove;
// 调用函数 排他思想
circleVisible();
}
})
// 5.鼠标经过时 设置定时器 自动轮播图片
// 自动轮播的效果 与点击右侧按钮的效果一样
// 即可以使用手动调取 右侧按钮点击事件
var carousel = setInterval(function autoCarousel() {
arrowR.click();
}, 3000)
// 排他
function circleVisible() {
// 干掉所有人
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下自己
ol.children[circleMove].className = 'current';
}
})
结构部分
这里有需要注意的一点，轮播图用到了之前封装的动画函数，需要引入动画的js文件，动画的js文件要在页面的js文件之前引入，因为动画js是依赖于页面的js文件的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/lb.css">
<!-- 依赖于lb.js 因为只有在有js文件时才会引入动画函数 所以要在前面引入 -->
<script src="./js/animate.js"></script>
<script src="./js/lb.js"></script>
</head>
<body>
<div class="w">
<div class="focus">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"></a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<!-- 注意这是第一张图片复制过来的 -->
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
</div>
</div>
</body>
</html>
ok，轮播图克服掉了。
春意盎然，我的寒假还在继续。。。。。。