呼吸轮播图的思路
1,构建静态页面
2,document.getElementById找到按钮,为按钮创建一个function :改变图片的透明度,先将所有透明度归零,然后将要显示的img透明度改为1
4,封装一个函数,设三个参数,1,要改变的元素。2,要改变的属性。3,目标位置。在函数里面设置一个定时器。
animate = function (obj,attr,target){}
5,将透明度的改变用封装函数代替。
oImg.style.opacity = 0 ==> animate(obj,attr,target)
6,将下方li设置点击方法:下标对象赋值为i,点击对应的li,所有的图片透明度归零。对应的图片透明度变为1。
for (i = 0,i<oImg.length, i++){
oLi[i].num = i
oLi[i].onclick = function(){
for (j = 0 ,j<oImg.length,j++){
oImg.style.opacity = 0;
oLi[j].style.background = 'gray'
}
this.style.background = 'red'
animate(oImg[this.num],opacity,1)
}
}