JavaScript特效部分 学习打卡

需求分析

1、点击上图得左右箭头，分别跳转上一图和下一图
点击上一张图其实就是让一个变量进行递增，点击下一张图就是让变量递减
2、点击右下角小圆点也可以进行图片得轮播
通过索引让变量进行随意得修改
3、每间隔2s进行轮播图得自动切换
定时器
4、Typeof id 或者 typeof(id)

补充知识点

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表示在冒泡阶段调用

IE浏览器 – le6~8版本

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

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

DOM0级事件

DOM2级事件

DOM2级事件优点

1、我可以在一个元素上绑定同一个事件
2、可以多次绑定
3、他的执行顺序是按照绑定顺序依次执行

跨浏览器兼容性的DOM2级事件的处理程序

索引思维逻辑

1、所有的图片刚开始应该是隐藏；
2、然后index是几，我们就将对饮索引的图片显示出来；
3、知道我们原本的图片是通过overflow:hidden隐藏的

动态给标签添加自定义属性

项目：轮播图特效

JavaScript部分代码

//此处声明全局变量
var index = 0,//当前显示图片的索引 默认0
	timer = null,//定时器
	container = byId('container'),
	prev = byId('prev'),
	next = byId('next'),
	pics = byId('banner').getElementsByTagName('div'),
	dots = byId('dots').getElementsByTagName('span'),
	banner = byId('banner'),
	menuContent = byId('menu-content'),
	menuItems = menuContent.getElementsByClassName('menu-item'),
	subMenu = byId('sub-menu'),
	innerBox = subMenu.getElementsByClassName('inner-box'),
	size = pics.length;

//封装 getElementById()
function byId(id){
	return typeof(id) === 'string' ? document.getElementById(id) : id;
}
//封装 DOM二级事件监听 一般用于非IE浏览器
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;
	}
}
//封装 切换图片的函数
function changeImg(){
	for (var i=0;i<size;i++){
		pics[i].style.display = 'none';
		//先全部删除 再找到需要的显示出来
		dots[i].className = '';
		//先全部删除小圆点 再高亮需要的
	}
	pics[index].style.display = 'block';
	dots[index].className = 'active';
}
//封装 开启自动轮播
function startAutoplay(){
	timer = setInterval(function(){
		index++;
		if (index>=size) {
			index = 0
		}
		changeImg();
	},2000)
}
//封装 清除定时器 停止定时器
function stopAutoplay(){
	//timer有值才需要清除
	if (timer) { 
		clearInterval(timer);
	}
}

//DOM二级事件
// next.addEventListener('click',function(){
// 	alert('1');
// });

//调用自动轮播
startAutoplay();
//鼠标划入container 停止轮播
addHandler(container,'mouseover',stopAutoplay);
//鼠标划出container 开启轮播
addHandler(container,'mouseout',startAutoplay);

//点击下一张按钮显示下一张图片
addHandler(next,'click',function(){
	//点击下一张按钮的时候，使得索引递增
	index++;
	if (index>=size) {
		index = 0;
	}
	changeImg();
});
//点击上一张按钮显示上一张图片
addHandler(prev,'click',function(){
	//单击上一张按钮，使得索引递减
	index--;
	if (index<0) {
		index = size - 1;
	}
	changeImg();
});

//点击小圆点索引切换图片
for (var d=0;d<size;d++){
	//dots[d].id = d;//默认给每一个span添加id的属性
	dots[d].setAttribute('data-id',d);//自定义属性
	addHandler(dots[d],'click',function(){
		//只能获取最后一个值 作用域问题
		index = this.getAttribute('data-id');
		changeImg();
	});
}

//主菜单部分
//鼠标划过主菜单
for (var m=0,idx,mlen=menuItems.length;m<mlen;m++){
	//给所有的主菜单定义属性，表明它的索引
	menuItems[m].setAttribute('data-index',m);
	addHandler(menuItems[m],'mouseover',function(){
		//只能获取最后一个值 作用域问题
		//显示子菜单所在的背景
		//直接重置className 隐形移除hide
		subMenu.className = 'sub-menu';
		//获取当前主菜单的索引
		idx = this.getAttribute('data-index');
		//遍历所有的子菜单innerBox 将他们先隐藏起来
		for (var j=0,jlen=innerBox.length;j<jlen;j++){
			//隐藏所有的子菜单
			innerBox[j].style.display = 'none';
			menuItems[j].style.background = 'none';
		}
		//找到当前子菜单 让他显示出来
		innerBox[idx].style.display = 'block';
		menuItems[idx].style.background = 'rgba(0,0,0,.1)';
	});
}

//鼠标离开banner 隐藏子菜单
// addHandler(banner,'mouseout',function(){
// 	subMenu.className = 'sub-menu hide';
// });
//鼠标离开主菜单 隐藏子菜单
addHandler(menuContent,'mouseout',function(){
	subMenu.className = 'sub-menu hide';
	for (var j=0,jlen=innerBox.length;j<jlen;j++){
			menuItems[j].style.background = 'none';
		}
});
//鼠标划入子菜单 显示子菜单
addHandler(subMenu,'mouseover',function(){
	subMenu.className = 'sub-menu';
});
//鼠标划出子菜单 隐藏子菜单
addHandler(subMenu,'mouseout',function(){
	subMenu.className = 'sub-menu hide';
});