函数调用的的方法:
1,c()
2.c就是函数默认提供的方法、函数;
3.c.apply(),apply是改变 this(当前的值)如果c未定义,那么this的默认是window
1,全局变量(信号量)
2,排他模型
(1)全变黄
(2)当前显示的变红```
呼吸轮播图的思路:
1,透明底切换
animate(物体,{"opacity":1},1000)不透明;
animate(物体,{"opacity":0},1000)透明;
传统轮播图的js的步骤:
//得到元素
var carousel = document.getElementById("carousel");
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var circles = document.getElementById("circles");
var m_unit = document.getElementById("m_unit");
var imageUL = m_unit.getElementsByTagName("ul")[0];
var imageLis = imageUL.getElementsByTagName("li");
var circlesLis = circles.getElementsByTagName("li");
//克隆前我们得到个数
var length = imageLis.length;
//魔术的准备就是克隆第一张li,放到最后
imageUL.appendChild(imageLis[0].cloneNode(true));
//信号量```
var idx = 0;```
//自动轮播```
var timer = setInterval(rightBtnHandler,options.interval);```
//鼠标进入停止,离开继续
carousel.onmouseover = function(){
clearInterval(timer);
}
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,options.interval);
}
//监听
rightBtn.onclick = rightBtnHandler;
//右按钮的事件处理函数
function rightBtnHandler(){
//函数截流
if(m_unit.isanimated) return;
//信号量的变化
idx++;
//改变小圆点
changeCircles();
//运动机构的移动
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween,function(){
if(idx > length - 1){
idx = 0;
m_unit.style.left = "0px";
}
});
}
//监听
leftBtn.onclick = function(){
//函数截流
if(m_unit.isanimated) return;
//信号量的变化
idx--;
if(idx < 0){
idx = length - 1;
m_unit.style.left = -options.width * length + "px";
}
//改变小圆点
changeCircles();
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
}
//小圆点的监听
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].index = i;
circlesLis[i].onclick = function(){
//信号量就是自己的序号
idx = this.index;
//拉动
animate(m_unit,{"left" : -options.width * idx},options.animatetime,options.tween);
//改变小圆点
changeCircles();
}
}
//根据信号量设置小圆点
function changeCircles(){
//idx可能是5,但是我们的小圆点下标最大是4,所以用n过渡一下:
var n = idx > length - 1 ? 0 : idx;
//排他
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[n].className = "cur";
}
</script>
间隙轮播:
// 测试下是否会提交!
//得到所有元素
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
var length = lis.length;
//复制所有li,追加到ul里
ul.innerHTML += ul.innerHTML;
//信号量
var idx = 0;
//模拟右按钮的业务
function move(){
idx++;
// ul -> elem
// callback elem -> this
// ul -> this
animate(ul,{"top":-40 * idx},800,function(){
if(idx > length - 1){
idx = 0;
this.style.top = "0px";
}
});
}
```
//调用动画函数的间隔时间,要远大于动画运行时间
//这时就给人感觉一个间歇的过程
setInterval(move, 1800);
</script>