轮播图案例总结

轮播图案例总结

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

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

下面是总结

整体框架设计技巧

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

JS知识点

注意事项

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

封装

1.将获取id进行封装

var id = byId("id")


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

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

//第一个参数：绑定事件的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级事件 得区别

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

监听方法：

addEventListener() 和 removeEventListener()

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

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

addEventListener() 和 removeEventListener()

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

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

IE浏览器 – le6~8版本

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

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

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

点击出现下一个

未封装写法
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计时器来设置自动播放

function startAutoplay() {
	timer = setInterval(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";
	},2000);
};