轮播图案例总结

学习了JavaScript基础相关的内容之后，做了一个小的轮播图案例，做一下总结
案例说明：

点击左右箭头，右下角小圆点，可以切换图片
点击图片跳转链接
图片切换时，小圆点的颜色跟着变化，且当前图片显示高亮
图片进入页面自动切换，且鼠标放上去图片停止切换，鼠标移开继续播放
左侧菜单栏划鼠标过时出现各自对应的子菜单

在这里插入图片描述

下面是总结

整体框架设计技巧

对于轮播图的背景图，可以将每一个图片单独设置在一个块里，并附上连接。这样方便JS的操作。
整体框架由大到小，由主到次的编写，可以都使用div，但是每一个div的id、class名字都要设置的有意义。
属于一个小结构的多个块，可以放在一个块里，整体方便移动，以及js的检索设置；
高亮效果可以用盒阴影来设置
css设置样式的时候尽量用class 选择器，方便使用：事件名.className = “…”

JS知识点

注意事项

声明全局变量最好放在最上方统一声明
DOM0级事件：
next.οnclick=function(){}
next[“onclick”]=function(){} 效果相同
可以用：事件名.className = “…” 的方法为元素添加或去除样式

封装

1.将获取id进行封装

1
2
3
4
5
6

var id = byId("id")

function byId (id) {
return typeof(id)==="string"?document.getElementById(id):id;
}

2.封装通用事件的绑定方法

1
2
3
4
5
6
7
8
9
10
11
12
13

//第一个参数：绑定事件的DOM元素
//第二个参数：事件的名字
//第三个参数：事件处理的程序

function addHandler (element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,true);
}else if (element.attachEvent){
element.attachEvent("on"+type,handler);
}else {
element["on"+type]=null;
}
}

DOM0级事件和 DOM2级事件得区别

DOM0级事件：只能给一个元素得某一个行为绑定一次方法，第二次绑定得话会把前面得覆盖掉；
DOM2级事件：可以给某一个元素得同一个行为绑定多个不同得方法
DOM1级事件里面没有定义事件相关得内容；

监听方法：

addEventListener() 和 removeEventListener()

非ie浏览器 chrome firefox
opera safari le9以上

addEventListener()可以为元素添加多个事件处理程序，触发时候按照添加的顺序依次机型调用；
removeEventListener()移除事件处理程序（不能移除匿名添加的函数）

addEventListener() 和 removeEventListener()

第一个参数：事件名；
第二个参数：事件处理程序函数；
第三个参数：布尔值； true表示在捕获阶段调用
false表示在冒泡阶段调用

1 2	变量名.addEventListener("事件名",function(){}); //注意：这里的事件名前面没有on 例如onclick 要写 click

IE浏览器 – le6~8版本

attachEvent() 和 detachEvent()
attachEvent()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次执行
detachEvent()移除事件处理程序（不能移除匿名添加的函数）

1 2	变量名.attachEvent("事件名",function(){}); //注意这里的事件名要写onclick 不能去掉on

attachEvent() 和 detachEvent()
第一个参数：一个事件名
第二个参数：事件处理程序函数

点击出现下一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

未封装写法
arrow2.addEventListener("click",function(){//
bgimg++;//每一次点击，bgimg都加一
if (bgimg>=size){bgimg = 0};//size为size = bgimage.length, 通过数组的长度获取的有多少背景图
for(var i=0;i<size;i++){//i要从0开始，这样可以将设置上一张图片的样式
bgimage[i].style.display="none";
dot[i].className = "";
};
bgimage[bgimg].style.display = "block";
dot[bgimg].className = "dot0";
});

//监听封装之后写法
addHandler(arrow2,"click",function(){
bgimg++;
if (bgimg>=size){bgimg = 0};
for(var i=0;i<size;i++){
bgimage[i].style.display="none";
dot[i].className = "";
};
bgimage[bgimg].style.display = "block";
dot[bgimg].className = "dot0";
});

通过JavaScript计时器来设置自动播放

1
2
3
4
5
6
7
8
9
10
11
12