1页面布局
轮播图图片移动的实现原理是:利用浮动将所有图片依次排成一行,给这一长串图片添加一个遮罩层,每次只显示一张图,其余的都隐藏起来。对图片的父级元素添加绝对定位,通过控制Ieft属性,实现照片的整体移动。HTML示例代码如下,CSS代码详见本书源码。
1 <div class="w">
2 <div class="main">
3 <div class="focus fl">
4 <a href="javascript:;" class="arrow-l"> < </a>
5 <a href="javascript:;" class="arrow-r"> ></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等