11-项目:JS实现轮播图特效
作者:互联网
btn.onclick 等同于 btn[“onclick”] //任何的 . 都可以用[” “]代替
ie9或以上的透明度用opcity : .8 ;ie8及以下用filter:alpha(opcity=80)
一、焦点图结构及样式
二、主菜单
三、子菜单
四、上下一张按钮,及小圆点高亮
1、定义一个全局变量a,表示当前图片的索引
2、获取当前有多少张图片pics,pics.length
3、点击下一张,a++,如果a>=pics.length,那么a=0
4、用for循环把所有的图片隐藏,所有的的小圆点取消高亮
5、a就是当前图片、小圆点的索引,用pics[a].style或className,就可以显示出来
五、点击小圆点跳转到相应的图片
1、用size表示有多少个圆点
2、用for循环,size作为循环次数。内部dots[d].id = d,给dot添加id值
3、给每一个小圆点绑定事件,a = this.id,当前的id赋予a,再根据a来切换图片
六、自动轮播与清除自动轮播
1、设置一个全局变量timer=null
2、封装一个函数,里面
timer = setInterval(function(){index++;
if(index>=size) index=0;
change();//更换图片
},3000);
3、调用该函数
4、当鼠标进入图片区域,清除间歇调用timer
5、当鼠标离开图片区域,继续调用轮播函数
七、子菜单显示与隐藏
1、遍历出主菜单的每一行,并给它添加上自定义属性menuItems[m].setAttribute(“data-index”,m),并给每一行绑定函数
2、鼠标滑过主菜单的标题,获取自定义属性的值idx
3、把所有子菜单遍历出来,并隐藏,把索引值等于idx的子菜单显示
4、鼠标滑过主菜单,把所有主菜单标题背景去除,把索引值等于idx的设置背景
5、鼠标离开主菜单,子菜单隐藏
6、鼠标进入子菜单,子菜单显示
7、鼠标离开子菜单,子菜单隐藏
标签:11,index,菜单,轮播,鼠标,JS,小圆点,图片 来源: https://www.cnblogs.com/mingliangge/p/12207688.html