呼吸轮播图中注意的几个“点”
2017-10-11 本文已影响41人
飞一般的八哥
一、封装运动函数animate
对于呼吸轮播图，我们要考虑运动函数中包含的必要参数，为实现效果和作用铺好基石。①需要改变的对象；②要改变的对象某属性及终止状态；③轮播图都有运动或变化过程的时间，可谓运动时间或对象属性变化的时间；还有两个，比如考虑到变化的快慢状态是匀速还是先快后慢等的缓冲状态，④可选择增加缓冲状态描述词，以供缓冲状态函数的调用；有时候考虑运动的重复性，⑤可选择增加回调函数。那么封装的运动函数形式如下：
function animate(elem , targetJSON , time , tweenString , callback){
//每个参数的意义与上面的序号对应
//函数内部分析运动可能改变的那些常用属性及如何获取
//给要改变的对象添加需要改变的属性
//控制缓冲状态
//...
}
其实，封装运动函数是个庞大的工作量，考虑的方面很多，所以呢，大神封装好的运动函数我们拿来用就好，明白上面的前三个必要参数，会给轮播图带来的效果呈现。
dog.gif
二、呼吸轮播图的html及css（元素及布局）
看到上面的动图后，五张不同的图片，怎么就能实现呼吸轮播呢？呼吸轮播图有个显著的特点：淡入淡出，即图片的透明度发生改变。还有一个就是间隔时间，信号量的改变。轮播图上有左右侧按钮、下方图片信号量改变的小圆点。
效果截图.png
来看下html结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>呼吸轮播图</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!--最外层div容器，包含内容 -->
<div class="container" id="container">
<!--左右侧按钮-->
<div class="btns">
<a class="leftBtn" id="leftBtn"></a>
<a class="rightBtn" id="rightBtn"></a>
</div>
<!--图片序列 -->
<div class="imageslist" id="imageslist">
<ul>
<li class="first"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<!--图片信号量代表的小圆点 -->
<div class="circles" id="circles">
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript"></script>
</body>
</html>
再来看下css文件：
*{
margin: 0;
padding: 0;
}
.container{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #333;
position: relative;
}
.container ul{
list-style: none;
/*去掉无序列表的样式*/
}
.container ul li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter:alpha(opacity = 0);
}
.container ul li.first{
opacity: 1;
filter:alpha(opacity = 100);
}
.btns a{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
background-color: orange;
font-size: 30px;
line-height: 40px;
text-align: center;
border-radius: 50%;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.btns a:hover{
background-color: gold;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}
.circles{
position: absolute;
width: 150px;
height: 16px;
bottom: 10px;
right: 10px;
}
.circles ol{
list-style: none;
}
.circles ol li{
float: left;
width: 16px;
height: 16px;
background-color: orange;
margin-right: 6px;
border-radius: 50%;
cursor: pointer;
}
.circles ol li.current{
background-color: red;
}
综合来看，html结构和css布局不是很难写，ok，上面的代码能实现效果截图的布局。
三、呼吸轮播图的js代码（主角、重头戏）
通过DOM节点获取html中的元素，还有要声明一些变量
//得到container容器
var container = document.getElementById("container");
//得到li
var lis = document.getElementById("imageslist").getElementsByTagName("li");
//得到按钮
var leftBtn = document.getElementById("leftBtn");
var rightBtn=document.getElementById("rightBtn");
//得到小圆点
var circlesLi = document.getElementById("circles").getElementsByTagName("li");
//图片数量
var imgLength = lis.length;
//图片宽度
var width = 560;
//滚动速度
var animatetime = 300;
//缓冲描述
var tween = "Linear";
//间隔时间
var interval = 2000;
//标记图片信号量
var idx = 0;
自动轮播，定时器函数的构建，左右侧按钮的监听，图片信号量的改变及属性的变化：
//自动轮播
var timer = setInterval(rightBtnHandler,interval);
//鼠标进入停止
container.onmouseover = function(){
clearInterval(timer);
}
//鼠标离开开始
container.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//右按钮的监听
rightBtn.onclick = rightBtnHandler;
function rightBtnHandler(){
//函数截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx++;
if(idx > imgLength - 1){
idx = 0;
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
//左按钮的监听
leftBtn.onclick = function(){
// 一点击就会执行此函数。 如果我点击非常快，
// 比如0.5秒一次, 那么函数将会 每个0.5秒执行1次
// 为了解决动画没有完成，就执行下一次的问题，必须做点事情
// 标记 当前是否是在动画过程中
// 对象.isanimated 标记： 如果为true，说明它正在执行动画
// 对象.xxx undefined 假的
//函数截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx--;
if(idx < 0){
idx = imgLength - 1;
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
如果图片上面没有数字编号，再加之没有小圆点，就真的不好区分现在图片到底轮播到哪一张。所以添加小圆点就很有必要了，对小圆点的监听，反映图片信号量的改变。
//批量添加小圆点的监听
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i; //先编号
circlesLi[i].onclick = function(){
//截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx = this.index;
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
changeCircle();
}
}
//更换小圆点函数
function changeCircle(){
//去掉所有小圆点的current
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//给信号量这个小圆点加current
circlesLi[idx].className = "current";
}
四、最后点感想哈
人生在世要如意，日夜都要练代码。
呼吸轮播图的精髓在上面代码块了，其实挺让人纠结的地方就是图片信号量的定时器函数构建上。如此的代码块着实需要多多练习，多多思考。
