|
轮播图也成为焦点图，是网页中比较常见的网页特效
一.功能：
1.鼠标经过轮播图模块，左右两边的按钮显示，鼠标离开轮播图模块，就隐藏左右按钮。
2.点击右（左）侧按钮一次，图片往左（右）播放一张，一以此类推，点击几次按钮，就顺序播放几张图片。
3.图片播放的同时，下面的小圈圈模块也跟随一起变化。
4.点击小圆圈，可以播放相应的图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过轮播图，自动播放就会停止。
二.过程：
1.基础结构的搭建（html和css）
首先需要准备一个盒子，盒子里面有三个部分，第一个部分再左右两边用来实现左右两侧按钮箭头，第二部分用来实现底部小圆圈? 第三部分则装ul来中央实现图片的滚动。
对于所放图片必须放在一行上，才能实现图片的左右转换，因此需要将图片所在的ul的宽度足够快，比盒子的宽度大很多（至少比所有图片的总和宽度大），然后要加浮动，才能将图片放在一行上
2.轮播图的功能特效（JavaScript）
(1)鼠标经过离开轮播图 左右按钮显示隐藏
先用css设置左右两个按钮先隐藏起来，然后绑定鼠标经过和离开事件，当经过时按钮显示，当鼠标离开轮播图页面时候就隐藏起来。
(2)自动生成底部的小圆圈
核心：小圆圈的个数=图片张数
利用for循坏，先创造一个节点creatElement()，然后把创造的节点appendChild()插入到ol里去，循坏图片的张数次。然后ol里面的第一个小li设置为类名为selectd 表示被选中了。
(3)点击小圆圈 实现图片滑动
排他思想：干掉所有人，留下我自己
滚动图片算法：点击某个小圆，就让图片滚动，小圆圈的索引号×图片的宽度作为ul的移动距离。
滑动需要引用动画，因此需要自己封装一个animate（）动画函数（也可以使用jQuery中的animate（））。动画函数必须定位才能移动，因此需要对ul需要设置绝对定位。
直接在生成小圆圈的同时绑定点击事件，然后清除所有小li的selected被选择的类名，将当前的小li的类名设置为selected。然后取图片的宽度，再设置自定义属性（在生成小圆圈的时候，来记录当前的索引号），点击了某个小li就需要拿到当前小li的索引号，根据算法和利用animate（）函数实现图片滚动效果。
（4）右侧按钮实现无缝滚动
由于有层级的影响，左右按钮被ul压下去了，需要再css中加层级。
?对右按钮进行一个鼠标点击绑定事件，声明一个全局变量num，每点击一次就自增1，每加一次，就播放一次动画。（让这个变量×图片宽度，就是ul的滚动距离）
由于图片播放到最后一张后，再点击按钮，图片会露底，变成背景颜色，因此我们需要把ul的第一个li复制一份，放到ul的最后面，当图片滚动到克隆的最后一张图片的时候，让ul快速的，不做动画的跳到最左侧：left为0（即复原到最开始位置）。同时把num赋值为0，使其重新开始滚动
于此同时复制照片的同时，导致底部的小圆圈也增加了一个，因此我们可以让js帮我复制第一个小li把它放在最后。即再点击右键按钮之前，用到克隆第一个li cloneNode（）加true深克隆 复制里面的子节点 然后添加到ul的最后
（5）右侧按钮与小圆圈之间联系效果
声明一个全局变量circle，每点击一次有右侧按钮，我就让变量++，就播放下一张图片，让小圆圈跟随一起变化。即先清除其余小圆圈的setedcted被选中的类名，然后留下当前的小圆圈的setected被选中的类名
由于图片有5张，小圆圈有4个，需要添加一个判断条件，当走到克隆这张照片的时候，我们需要复原即circle=0。
由于num和circle变量和li点击没有任何联系，存在差异，因此再点击小圆圈的同时需要拿到当前的索引号，把这个li的索引号给num和circle
（6）左侧按钮功能（与右侧按钮相似，同理）
（7）自动播放功能
添加一个定时器 自动播放功能类似于点击右侧按钮，使用手动调用事件来调用右侧按钮点击事件对象.click(),然后再前面的鼠标经过事件中加入停止定时器，鼠标离开事件中加入开启定时器。
（8）节流阀控制
?为了防止轮播图按钮连续点击造成播放过快的的问题 需要引入节流阀。即当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
利用回调函数，添加一个变量来控制，锁住函数和解锁函数，即开始的时候令变量为false来锁住函数，当执行完动画后，利用回调函数将变量变为true来解锁函数。
到此为止，整个轮播图的功能就实现完毕了。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="../css/基础.css">
<!--这个animate函数要写到轮播图.js的上面-->
<script src="../js/animate.js"></script>
<script src="../js/轮播图.js"></script>
</head>
<body>
<div class="ju">
<!--左侧按钮-->
<a href="javascript:;" class="prev"> < </a>
<!--右侧按钮-->
<a href="javascript:;" class="next"> > </a>
<!--核心的滚动区域-->
<ul class="iamges">
<li>
<a href="#"><img src="../iamges/12.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/13.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/14.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/15.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/16.jpg"></a>
</li>
</ul>
<!--小圆圈-->
<ol class="circle">
</ol>
</div>
</body>
</html>
css部分：
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.ju {
position: relative;
margin: auto;
width: 400px;
height: 304px;
overflow: hidden;
}
.ju ul {
width: 600%;
position: absolute;
top: 0;
left: 0;
}
.ju ul li {
display: block;
float: left;
}
.prev {
position: absolute;
left: 0;
top: 50%;
margin-top: 15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
display: none;
z-index: 2;
}
.next {
position: absolute;
right: 0;
top: 50%;
margin-top: 15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
display: none;
z-index: 2;
}
.circle {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255, 255, 255, .3);
border-radius: 7px;
}
.circle li {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
float: left;
}
.circle .selected {
background-color: orange;
}
js部分：
自我封装的animate
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);
if (obj.offsetLeft == target) {
//停止动画 本质是停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束里面
//if (callback) {
//调用函数
//callback();
//}
callback && callback();
}
//步长值（目标值-现在位置）/10
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
主题部分
window.addEventListener('load', function() {
//1.获取元素
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var ju = document.querySelector('.ju');
var imagewidth = ju.offsetWidth;
//2.鼠标经过两边的按钮 显示隐藏左右按钮
ju.addEventListener('mouseenter', function() {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer = null; //清除定时器
})
ju.addEventListener('mouseleave', function() {
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function() {
//手动调用点击事件
next.click();
}, 2000);
})
var ul = ju.querySelector('.iamges');
//console.log(ul.children.length);
var ol = ju.querySelector('.circle');
//console.log(ol.children.length);
for (var i = 0; i < ul.children.length; i++) {
//创建第一个小li
var li = this.document.createElement('li');
//记录当前小圆圈的索引号，通过自定义属性来做
li.setAttribute('index', i);
//把小li插入到ol里面
ol.appendChild(li);
//4.小圆圈的排他思想，直接绑定点击事件
li.addEventListener('click', function() {
//干掉所有人 把所有的小li清除selected类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下我自己，当前的小li设置current类名
this.className = 'selected';
//5.点击小圆圈，移动图片 移动kiku这个盒子
//ul的移动距离 小圆圈的索引号×图片的宽度 注意是负值
//点击某个小li 就拿到当前小li的索引号
var index = this.getAttribute('index');
//当我们点击了某个小li 就把这个索引号给num,circle
num = index;
circle = index;
//console.log(index);
//console.log(imagewidth);
animate(ul, -index * imagewidth);
})
}
ol.children[0].className = 'selected';
//6.克隆第一张（li）图片放在最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7.点击右侧按钮 图片移动一张
var num = 0;
var circle = 0;
//flag 节流阀
var flag = true;
next.addEventListener('click', function() {
if (flag) {
flag = false; //关闭节流阀
//如果走到了最后一张复制图片，此时的ul要快速复原
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * imagewidth, function() {
flag = true; //打开节流阀
});
//8.点击右侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle==5 说明到了最后张图片 要复原
if (circle == ol.children.length) {
circle = 0;
}
//先清除其余circle的类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前circle的类名
ol.children[circle].className = 'selected';
}
})
//9左侧按钮的做法
prev.addEventListener('click', function() {
if (flag) {
flag = false; //关闭节流阀
//如果走到了最后一张复制图片，此时的ul要快速复原
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * imagewidth + 'px';
}
num--;
animate(ul, -num * imagewidth, function() {
flag = true; //打开节流阀
});
//点击左侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle<0 说明到了最后张图片 小圆圈要改为第5个小圆圈
if (circle < 0) {
circle = ol.children.length - 1;
}
//先清除其余circle的类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前circle的类名
ol.children[circle].className = 'selected';
}
})
//自动播放轮播图
var timer = setInterval(function() {
//手动调用点击事件
next.click();
}, 2000);
})
|