//得到carousel
var carousel = document.getElementById("carousel");
//得到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;
- animate函数是动画封装函数
- @para0 elem参数就是运动的对象
- @para1 targetJSON参数就是运动的终点状态,可以写px,也可以不写px
{
"left": 500,
"top": 600
}
- @para2 time是运动总时间,毫秒为单位
- @para3 tweenString缓冲描述词,比如"Linear",可选
- @para4 callback是回调函数,可选
- return 本函数没有返回值
*/
function animate(elem , targetJSON , time , tweenString , callback)
//左按钮的监听
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(){
//去掉所有小圆点的cur
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//第信号量这个小圆点加cur
circlesLi[idx].className = "cur";
}
apply()的作用
var a = {"name": "Jack"}
// apply 可以传递参数,让函数中的this变成传入的参数
// c.apply(a);
//c拥有与a一样的属性。
// 3. 与apply非常相似
c.call(oBox);
网友评论