目录
前言
? ? ? ?在此之前，小糖其实尝试了很多讲解方式，但还是不满意推翻重写（小糖写文章的风格初衷就是尽量简短精细易懂）琢磨了两天，甚至于在CSDN观摩其他人的轮播图讲解文章，还是感觉讲的太晦涩，最后决定用模块化的讲解方式，（也算另一种简短了吧？）
这样大家好接受一些，不会眼花缭乱。制作不易，这篇文章足够大家放收藏夹吃灰了吧哈哈哈哈哈哈......
?一、结构搭建
细节部分：
1、要注意焦点数是与（展示的）图片数量同步的。
如下：原生HTML焦点列表中是没写焦点的?? ?
<!--焦点模块-->
<ol class="circle" ></ol>?2、图片要用列表包裹，且一行显示（用浮动）时，会发现其他图片消失了
? ? （原因：只是让li左浮动，但是浮动的元素无法撑开ul，所以让ul变宽即可，如下）
?
ul {
position: absolute;
width: 800%;
height: 100%;
}
?3、注意按钮层级！不然会被图片覆盖啦！要用按钮的css中的z-index！
.arrow-l, .arrow-r {
z-index: 999;
}代码实现：
? ? ?
?* {
? ? ? ? ? ? padding: 0;margin: 0;
? ? ? ? }
? ? ? ? .focus {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? ? ? width: 520px;
? ? ? ? ? ? height: 280px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 800%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? ul li {
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? float: left;
? ? ? ? ? ??
? ? ? ? }
? ? ? ? .arrow-l, .arrow-r {
? ? ? ? ? ? display: none;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? z-index: 999;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top:50%;
? ? ? ? ? ? margin-top: -20px;
? ? ? ? ? ? width: 24px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? color:#fff;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? font-size: 18px;
? ? ? ? ? ? background: rgba(121, 120, 120, 0.5);
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border-radius: 0 9px 9px 0;
? ? ? ? }
? ? ? ? .arrow-l:hover, .arrow-r:hover {
? ? ? ? ? ? color:orange;
? ? ? ? ? ? font-weight: bolder;
? ? ? ? }
? ? ? ? .arrow-r {
? ? ? ? ? ? right: 0;
? ? ? ? ? ? border-radius: 9px 0 0 9px;
? ? ? ? }
? ? ? ? ol {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: 10px;
? ? ? ? ? ? left: 10px;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: space-evenly;
? ? ? ? }
? ? ? ? ol li {
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? margin-right: 2px;
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color: rgb(255, 255, 255);
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? border: 1.5px solid white;
? ? ? ? }
? ? ? ? .carrent {
? ? ? ? ? ? background-color: orange;
? ? ? ? }?<div class="focus">
? ? ? ? <!--按钮模块-->
? ? ? ? <a href="javacript:;" class="arrow-l"><</a>
? ? ? ? <a href="javacript:;" class="arrow-r">></a>
? ? ? ? <!--轮播图模块-->
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="javacript:;"><img src="./img/O1CN01m6rRlH1rFJ4fFW57D_!!6000000005601-0-octopus.jpg" alt=""></a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="javacript:;"><img src="./img/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg" alt=""></a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="javacript:;"><img src="./img/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt=""></a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="javacript:;"><img src="./img/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg" alt=""></a>
? ? ? ? ? ? </li>
? ? ? ? ? ??
? ? ? ? </ul>
? ? ? ? <!--焦点模块-->
? ? ? ? <ol class="circle" ?></ol>
? ? </div>效果图：
二、功能模块分析
1、盒子模块
原理：
? ? ? ? ? ? ? ? ? ?当鼠标进入盒子时显示按钮，离开时隐藏按钮
? ? ? ? ? ? ? ? ?（小糖觉得也可以用css平替，不过后期应该不行叭~）
代码实现：
var focus1 = document.querySelector('.focus');
? ? ? ? var arrowl = document.querySelector('.arrow-l');
? ? ? ? var arrowr = document.querySelector('.arrow-r');
? ? ? ? focus1.addEventListener('mouseenter',function(){
? ? ? ? ? ? arrowl.style.display = 'inline-block';
? ? ? ? ? ? arrowr.style.display = 'inline-block';
? ? ? ? });
? ? ? ? focus1.addEventListener('mouseleave',function(){
? ? ? ? ? ? arrowl.style.display = 'none';
? ? ? ? ? ? arrowr.style.display = 'none';
? ? ? ? });
效果：
2、焦点模块（重点）
原理：
? ? ? ? ? ? ? ? ? ?利用js-DOM 根据（展示的）图片数量创建焦点，且当焦点被点击时变色，图片切换
细节部分：
?? ? ? ? ? ? 1、利用之前我们书写缓动效果时的函数，把它封装起来，现在可以用来修改啦！
? ? ? ? ? ? ?2、在创建焦点时要记录它的索引号，后面可以根据索引号找图片，
? ? ? ? ? ? ? ??? ?记录后也要声明再使用哦！！
? ? ? ? ? ? ?3、盒子宽度要声明为全局变量（focus1width）
? ? ? ? ? ? ?4、图片移动的距离就是：- 索引号 * 盒子宽度（focus1width）?
代码实现：
var ul = focus1.querySelector('ul');
? ? ? ? var ol = focus1.querySelector('.circle');
? ? ? ? for(var i = 0;i < ul.children.length;i++){
? ? ? ? ? ? //创建新元素
? ? ? ? ? ? var li = document.createElement('li');
? ? ? ? ? ? //记录当前小圆圈的索引号 用自定义属性来做
? ? ? ? ? ? li.setAttribute('index',i);
? ? ? ? ? ? //将元素插入ol里面
? ? ? ? ? ? ol.appendChild(li);
? ? ? ? li.addEventListener('click',function(){ ? //排他思想一定写在循环里面 不然只能执行一次
? ? ? ? ? ? for(var i = 0;i < ol.children.length;i++){
? ? ? ? ? ? ? ? //排除所有
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下自己
? ? ? ? ? ? this.className = 'carrent';
? ? ? ? ? ? //ul移动的距离 小圆圈的索引号 乘以 图片的宽度?
? ? ? ? ? ? //当我们点击某个li 就拿到当前li的索引号?
? ? ? ? ? ? var index = this.getAttribute('index');
? ? ? ? ? ? //var focus1width = focus1.offsetWidth; ? 要改为全局变量
? ? ? ? ? ? animate(ul,-index * focus1width);
? ? ? ? });
? ? ? ? };效果：
?
3、右侧按钮模块（重点）
原理：
? ? ? ? ? ? ? ? ? ?点击按钮实现图片切换，用一个num变量控制图片切换；实现无缝滚动效果
细节部分：
?? ? ? ? ? ? 1、无缝滚动：将ul中的第一个li复制一份放到ul最后面（即用深克隆）
? ? ? ? ? ? ? ? ? ?当图片滚动到最后一张时，让ul快速跳到最左侧，即 left:0; 同时赋值num为0。
?? ? ? ? ? ? 2、还要在声明一个circle变量控制焦点播放
?? ? ? ? ? ? 3、可能出现circle与num不一致造成bug，解决办法：在焦点的事件侦听器中令两者与索引号一致。
?? ? ? ? ? ? 4、知道无缝滚动时，num是如何变化的（细看代码）
代码实现：
var num = 0; ? ?//控制图片切换 ? ? ? ? ??
? ? ? ? var circle = 0; ? ?//控制焦点播放 ? ??
? ? ? ? arrowr.addEventListener('click',function(){
? ? ? ? ? ? ? ? if(num == ul.children.length - 1) {
? ? ? ? ? ? ? ? ul.style.left = 0 + 'px';
? ? ? ? ? ? ? ? num = 0;
? ? ? ? ? ? }
? ? ? ? ? ? num++; ? ??
? ? ? ? ? ? animate(ul,-num*focus1width);
? ? ? ? ? ? circle++;
? ? ? ? ? ? //但是图片有五张 源泉只有四个，所以要设置
? ? ? ? ? ? if(circle == ol.children.length) {
? ? ? ? ? ? ? ? circle = 0;
? ? ? ? ? ? }; ? ? ? ? ? ? ? //要放在排他思想之前 因为if是执行的前提
? ? ? ? ? ??
? ? ? ? ? ? //排他思想
? ? ? ? ? ? //先清除其余小圆圈的current类名
? ? ? ? ? ? for (var i = 0;i < ol.children.length;i++){
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下当前小圆圈的类名
? ? ? ? ? ? ol.children[circle].className = 'carrent';
? ? ? ? }
? ? ? ? });?效果：
?
4、左侧按钮
原理：
? ? ? ? ? ? ? ? ? ?同上
细节部分：
?? ? ? ? ? ? 注意修改无缝滚动的条件以及焦点播放的条件
代码实现：
arrowl.addEventListener('click',function(){
? ? ? ? ? ? ? ? if(num == 0) {
? ? ? ? ? ? ? ? num = ul.children.length - 1;
? ? ? ? ? ? ? ? ul.style.left = -(num*focus1width) + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? num--; ? ??
? ? ? ? ? ? animate(ul,-num*focus1width);
? ? ? ? ? ? //点击左侧按钮 小圆圈跟着变化 可以再声明一个变量控制小圆圈的播放
? ? ? ? ? ? circle--;
? ? ? ? ? ? //但是图片有五张 圆圈只有四个，所以要设置
? ? ? ? ? ? if(circle < 0) {
? ? ? ? ? ? ? ? circle = ol.children.length - 1;
? ? ? ? ? ? }; //要放在排他思想之前 因为if是执行的前提
? ? ? ? ? ? //排他思想
? ? ? ? ? ? //先清除其余小圆圈的current类名
? ? ? ? ? ? for (var i = 0 ; i < ol.children.length ; i++){
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下当前小圆圈的类名
? ? ? ? ? ? ol.children[circle].className = 'carrent';
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? });
效果：
?
5、自动播放模块
原理：
? ? ? ? ? ? ? ? ? 利用定时器实现图片切换，可利用右侧按钮的”手动调用事件“
代码实现：
//自动播放?
? ? ? ? var timer = setInterval(function(){
? ? ? ? ? ? arrowr.click(); ? //手动调用事件
? ? ? ? },2000);效果：
?
6、节流阀模块
原理：
? ? ? ? ? ? ? ? ? 相当于给每次图片切换加一个”开关“，当切换完成才可以打开，
? ? ? ? ? ? ? ? ? 而判断是否完成切换的重要侦听器就是利用回调函数callback。
细节部分：
? ? ? ? ? ? ? ? ? callback是加在每个按钮侦听器里的，要声明一个布尔类型的变量充当开关
代码实现：
?
?（左右侧按钮同样道理，此处只展示右侧）
?7、一些会碰到的疑问
1、为什么焦点数小于实际的图片数？
? ? ? 答：因为我们是优先获取焦点，再额外克隆第一张图片，按照事件流执行顺序，焦点数已是完成获取的了。
2、克隆不成功
? ? ? 答：克隆要使用深克隆，值为true
3、图片不移动
? ? ? 答：移动的是整个ul而不是单个li
三、完整代码
最后给盒子添加溢出隐藏就好啦~
完整js代码自取！
//1.获取按钮
? ? ? ? var focus1 = document.querySelector('.focus');
? ? ? ? var arrowl = document.querySelector('.arrow-l');
? ? ? ? var arrowr = document.querySelector('.arrow-r');
? ? ? ? var focus1width = focus1.offsetWidth; ? ? ?//要改成全局变量
? ? ? ? var flag = true; ?//节流阀
? ? ? ? focus1.addEventListener('mouseenter',function(){
? ? ? ? ? ? arrowl.style.display = 'inline-block';
? ? ? ? ? ? arrowr.style.display = 'inline-block';
? ? ? ? ? ? clearInterval(timer) ; ?//当鼠标进入，停止自动播放
? ? ? ? ? ? timer = null;
? ? ? ? });
? ? ? ? focus1.addEventListener('mouseleave',function(){
? ? ? ? ? ? arrowl.style.display = 'none';
? ? ? ? ? ? arrowr.style.display = 'none';
? ? ? ? ? ? timer = setInterval(function(){
? ? ? ? ? ? arrowr.click(); ? //手动调用事件
? ? ? ? },2000);
? ? ? ? });
? ? ? ? //3.动态生成小圆圈 几个图片 几个小圆圈
? ? ? ? var ul = focus1.querySelector('ul');
? ? ? ? var ol = focus1.querySelector('.circle');
? ? ? ? for(var i = 0;i < ul.children.length;i++){
? ? ? ? ? ? //创建新元素
? ? ? ? ? ? var li = document.createElement('li');
? ? ? ? ? ? //记录当前小圆圈的索引号 用自定义属性来做
? ? ? ? ? ? li.setAttribute('index',i);
? ? ? ? ? ? //将元素插入ol里面
? ? ? ? ? ? ol.appendChild(li);
? ? ? ? ? ? li.addEventListener('click',function(){ ? //排他思想一定写在循环里面 不然只能执行一次
? ? ? ? ? ? for(var i = 0;i < ol.children.length;i++){
? ? ? ? ? ? ? ? //排除所有
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下自己
? ? ? ? ? ? this.className = 'carrent';
? ? ? ? ? ? //5.点击小圆圈 ul移动
? ? ? ? ? ? //ul移动的距离 小圆圈的索引号 乘以 图片的宽度?
? ? ? ? ? ? //当我们点击某个li 就拿到当前li的索引号?
? ? ? ? ? ? var index = this.getAttribute('index');
? ? ? ? ? ? num = circle = index; ? ? ?//num 和 circle 和索引号统一 才不会出现bug
? ? ? ? ? ? //var focus1width = focus1.offsetWidth; ? 要改为全局变量
? ? ? ? ? ? animate(ul,-index * focus1width);
? ? ? ? });
? ? ? ? };
? ? ? ? //6.克隆第一张图片
? ? ? ? var first = ul.children[0].cloneNode(true);
? ? ? ? ul.appendChild(first);
? ? ? ? //右侧按钮 ? ?无缝滚动原理：将ul中的第一个li复制一份放到ul最后面
? ? ? ? // ? ? ? ? ? ?当图片滚动到最后一张时，让ul快速跳到最左侧 即 left:0; 同时赋值num为0
? ? ? ? var num = 0; ? ?//控制图片切换 ? ? ? ? ??
? ? ? ? var circle = 0; ? ?//控制焦点播放 ? ??
? ? ? ? arrowr.addEventListener('click',function(){
? ? ? ? ? ? if(flag) {
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? if(num == ul.children.length - 1) {
? ? ? ? ? ? ? ? ul.style.left = 0 + 'px';
? ? ? ? ? ? ? ? num = 0;
? ? ? ? ? ? }
? ? ? ? ? ? num++; ? ??
? ? ? ? ? ? animate(ul,-num*focus1width,function(){
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? });
? ? ? ? ? ? //点击右侧按钮 小圆圈跟着变化 可以再声明一个变量控制小圆圈的播放
? ? ? ? ? ? circle++;
? ? ? ? ? ? //但是图片有五张 源泉只有四个，所以要设置
? ? ? ? ? ? if(circle == ol.children.length) {
? ? ? ? ? ? ? ? circle = 0;
? ? ? ? ? ? }; ? ? ? ? ? ? ? //要放在排他思想之前 因为if是执行的前提
? ? ? ? ? ??
? ? ? ? ? ? //排他思想
? ? ? ? ? ? //先清除其余小圆圈的current类名
? ? ? ? ? ? for (var i = 0;i < ol.children.length;i++){
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下当前小圆圈的类名
? ? ? ? ? ? ol.children[circle].className = 'carrent';
? ? ? ? }
? ? ? ? });
? ? ? ? //9.左侧按钮
? ? ? ? arrowl.addEventListener('click',function(){
? ? ? ? ? ? if(flag) {
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? if(num == 0) {
? ? ? ? ? ? ? ? num = ul.children.length - 1;
? ? ? ? ? ? ? ? ul.style.left = -(num*focus1width) + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? num--; ? ??
? ? ? ? ? ? animate(ul,-num*focus1width,function(){
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? });
? ? ? ? ? ? //10.点击左侧按钮 小圆圈跟着变化 可以再声明一个变量控制小圆圈的播放
? ? ? ? ? ? circle--;
? ? ? ? ? ? //但是图片有五张 圆圈只有四个，所以要设置
? ? ? ? ? ? if(circle < 0) {
? ? ? ? ? ? ? ? circle = ol.children.length - 1;
? ? ? ? ? ? }; //要放在排他思想之前 因为if是执行的前提
? ? ? ? ? ? //排他思想
? ? ? ? ? ? //先清除其余小圆圈的current类名
? ? ? ? ? ? for (var i = 0 ; i < ol.children.length ; i++){
? ? ? ? ? ? ? ? ol.children[i].className = '';
? ? ? ? ? ? }
? ? ? ? ? ? //留下当前小圆圈的类名
? ? ? ? ? ? ol.children[circle].className = 'carrent';
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? });
? ? ? ? //11.自动播放?
? ? ? ? var timer = setInterval(function(){
? ? ? ? ? ? arrowr.click(); ? //手动调用事件
? ? ? ? },4000);
? ? ? ? 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); ??
? ? ? ? ? ? //解决在前进与后退两种情况下 step 应该 ?“向上取整” ?还是 ?“向下取整”！！！！！！！
? ??
? ??
? ? ? ? ? ? ?//当不断点击按钮时，这个元素就会越来越快，因为启动了太多计时器
? ? ? ? ? ? ?//解决办法：在启动定时器时之前保证只有一个计时器 即先清除所有计时器
? ? ? ? if( obj.offsetLeft == target){ ?//用 ?“==” ? 取代 ?'>=' ?可以解决盒子返回时无法执行的问题
? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? if(callback) {
? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? obj.style.left = obj.offsetLeft + step +'px';
? ? },20);
? ? };?效果图：
四、结束语
希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！?小糖谢谢各位啦~?? ?? ?? ?