js-图片轮播和切换(定时器setInterval()和setTimeout())

js图片轮播和切换

前两去看js和jq知识框架去了，没有写博客，总感觉少了点什么，看的差不多了今天动动手
本次实例涉及到的知识点：
jq选择器，定时器，js点击事件，setInterval()/setTimeout()定时器，js选择器，switch语句
效果图：

点击play，进行轮播，顺序从第一张到第五张，back返回第一张图，下面的数字点击分别切换队形位置的图片
思路：
1、img，button*6，绑定点击事件
2、定时器进行轮播
遇到的问题：
1、点击切换对应图片
开始想法比较简单，分别给每个按钮设置上点击事件

//var btn = document.getElementById('test')
// btn.onclick = function(){
// 	key = Math.floor(Math.random()*pic.length);
// 	val = pic[key];
// 	text.innerHTML = '这是第'+(key+1)+'张图片'+',总共'+pic.length+'张图片';
// 	img.src = 'img/'+val;
// }

然后实际操作的时候才发现，重复性的代码太多了，虽然能够完成效果但是没有预期中的好。就去思考如何根据点击的按钮不同，获取按钮的id来对图片进行操作，所以有了以下的方法来获取点击按钮的id

jQuery：
$('input').bind('click',function(){
		var id = $(this).attr('id');
}

然后根据获取的id勇敢switch语句去判断点击的是哪一个按钮，该怎样做，然而值得一提的是，case条件判断是全等"==="；由于太久没使用导致我开始是直接写的case a，虽然是数值上的相等，类型却不同，导致在这里卡住了一小会儿，引以为戒

case 'a':
					key = 1
					break;
val = pic[key-1];
img.src = 'img/' + val;

val是图片的src字符串，key是脚标，pic是存放图片的一个数组，根据key值设置对应的图片。稍微注意一下文件的路径别写错了，不然是读不到文件的
2、图片轮播
①一开始我是用for循环去做的，让key从0++到5(pic.length)，用了网上copy的sleep()函数实现轮播的延时，后来发现的问题却是，在key自增的过程中，虽然设置了img的src属性，却并没有变化，只有循环结束之后才会设置上最后一张图片。

sleep():
function sleep(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
		return;
	    }
}

问了一些大陆佬，说的是sleep()的问题，到最后也没有弄明白根本的原因，也有人说是for循环是操作数据的（那么问题就是，不是无效的操作，而是循环结束之后只设置了最后一张图）。
②最后采用了定时器的方法，成功实现了轮播的问题

	var num = 0;
	clearInterval(begin);
	var begin = setInterval(function(key){
		key = num;
		num ++;
		if(key < pic.length){
			val = pic[key];
			console.log(val);
			img.src = 'img/' + val;
			text.innerHTML = '这是第'+(key+1)+'张图片'+',总共'+pic.length+'张图片';
		}
	},1000);

但是随即又遇到了新的问题，点击多次play会重复事件，清除定时器的clearInterval()/clearTimeout()方法似乎并没有起作用，于是又去补了这两者的相关知识点
参考博客：
1、setInterval的弊端和解决方案
2、关于js中两种定时器的设置及清除
遗憾的是问题并没有得到解决，似乎不应该用if进行自加，而该采用遍历的方式可以避免这个问题。
最后，虽然是实现了这个效果，但是其中逐步发现的问题，也体现了我相关基础知识很薄弱，我会接着寻找解决问题的办法，，当然如果有大佬知道请麻烦留言告知一下，十分感谢！