HTML+CSS+JavaScript实现轮播图

1页面布局

轮播图图片移动的实现原理是：利用浮动将所有图片依次排成一行，给这一长串图片添加一个遮罩层，每次只显示一张图，其余的都隐藏起来。对图片的父级元素添加绝对定位，通过控制Ieft属性，实现照片的整体移动。HTML示例代码如下，CSS代码详见本书源码。

1 <div class="w">
2   <div class="main">
3       <div class="focus fl">                
4           <a href="javascript:;" class="arrow-l"> &lt; </a>           
5           <a href="javascript:;" class="arrow-r"> &gt;</a>                   
6           <ul>                    
7               <li><a href="#"><img src="upload/1.jpg" alt=""></a> </li>
8               <li><a href="#"><img src="upload/2.jpg" alt=""></a> </li>
9               <li><a href="#"><img src="upload/3.jpg" alt=""></a> </li>
10              <li><a href="#"><img src="upload/4.jpeg" alt=""></a></li>
11              <li><a href="#"><img src="upload/1.jpeg" alt=""></a></li>
12          </ul>               
13     </div>           
14  </div>
15 </div>

上述代码中，第3行“<div class="focus fl">”是图片区域的遮罩层，它的宽度和1张图片的宽度保持一致，overflow属性设置为hidden，每次只显示一张图片。position属性设置为relative，使子元素ul相对它进行移动；第4-5行代码设置图片区域左右的两个指示按钮；第6-12行代码是要移动的ul元素，以及轮播图中的所有图片。

2轮播动画

轮播动画实现的原理是：鼠标进入轮播图，每单击图片区域左侧按钮一次，ul向右移动1次，移动距离是一张图片的宽度；每单击图片区域右侧按钮一次，ul向左移动1次，移动距离是一张图片的宽度。鼠标离开轮播图，自动轮播。ul移动过程中，采用缓动动画效果，即先快后慢的到达目标点。案例调用本书第8章8.7节封装的动画函数animate()实现轮播动画效果。

（1）.单击图片区域右侧按钮，示例代码如下。

1 var arrow_r = document.querySelector('.arrow-r');
2 var focus = document.querySelector('.focus');
3 var ul = focus.querySelector('ul');
4 var num = 0;
5 focus.addEventListener('mouseenter', function() {
6        arrow_l.style.display = 'block';
7        arrow_r.style.display = 'block';
8        clearInterval(timer);
9        timer = null; // 清除定时器变量
10    });
11 arrow_r.addEventListener('click', function() {      
12        if (num == ul.children.length - 1) {
13                ul.style.left = 0;
14                num = 0;
15            }
16         num++;
17         animate(ul, -num * 721);            
18        }
19    });

上述代码中，第1-3行分别获取右侧按钮、遮罩层和要移动的ul元素；第5行代码为遮罩层绑定鼠标进入事件及其处理程序。当鼠标进入时，左右按钮设置为显示状态，关闭自动轮播动画效果；第11行代码为右侧按钮绑定单击事件及其处理程序；在事件处理程序中，第17行代码调用缓动动画函数animate()向左移动ul，每次移动距离是num*721，721代表1张图片的宽度。第12-15行代码判断当图片轮播到最后1张时，将ul的left属性和变量num还原，从第1张继续轮播。

（2）.单击图片区域左侧按钮和右侧原理一样，方向不同，示例代码不再赘述。

（3）.自动轮播

var timer = setInterval(function() {   
        arrow_r.click();
    }, 2000);

上述代码中，开启定时器，每隔2秒钟触发右侧按钮单击事件，实现自动轮播效果。

（4）.鼠标离开遮罩层，自动轮播

focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    });

上述代码为遮罩层绑定鼠标离开事件及其处理程序。当鼠标离开时，左右按钮的状态设置为隐藏；开启定时器，每隔2秒钟触发右侧按钮单击事件，实现自动轮播效果。

3 防止暴力点击

如果用户快速点击按钮触发单击事件，则会在短时间内多次调用动画函数，导致轮播图出现抖动。为了限制用户快速点击，始终保证轮播图的动画同时只有一个执行，优化单击事件处理程序，示例代码如下。

1 var flag = true;
arrow_r.addEventListener('click', function() {
2    if (flag) {
3            flag = false;          
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
 4               flag = true; 
            });
        }
    });

上述代码中，与10.4.2小节示例代码的区别已被标注了行号。第1行代码声明变量flag，它代表当前动画是否执行完毕，初始值为true；单击右侧按钮时，第2行代码首先判断flag的值，如果是true，则调用动画函数，并将true的值设为false；否则，不执行。当本次动画结束后，第4行代码将flag设置为true，此时可以执行下一次动画。

前端轮播图种类很多，比如横向循环焦点图片、环形旋转木马视图切换、动态进入的切换图、缩放的banner图切换和分离缓动切换等。项目中可以采用免费开源的的第三方轮播图插件实现不同的效果，比如Swiper等

视频讲解：HTML+CSS+JavaScript实现轮播图网页特效_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》