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, 鼠标离开子菜单, 子菜单隐藏
来源: http://www.bubuko.com/infodetail-3460512.html