日常学习-javasript之趣多多的“生产过程”

用逻辑实现图片的轮播，实例：

单边模式只能实现一边循环，到第四张图片即停止。循环模式可以实现从第四张图片到第一张图片的切换，循环播放。在布局中，用一个大盒子包裹四张图片 ，但只显示一张图片，其他的图片隐藏，在显示的时候只有一张图片被激活，运用类名控制显示的图片。

左边的循环代码：

cPrev.onclick = function(){
			prevIndex = nowIndex;
			nowIndex --;
			if(nowIndex < 0){
				if(bool){
					nowIndex = 0;
				}else{
					nowIndex = bLi.length - 1;
				}
			}
			bLi[prevIndex].className = "";
			bLi[nowIndex].className = "active";
			eTit.innerHTML = nowIndex + 1 + "/4";
		};

首先将当前的图片编号赋值给前一个编号，当前编号向左变化应该自减，进入判断，小于零自减为负数说明为第一张图片。如果不小于零，直接将前一个类名改为空，而空类名将会被隐藏起来，新的类名赋值给当前图片。如果小于零，再进行判断，若当前bool值为真，nowIndex值为零，否则为 图片3.。下面贴出完整代码：

cPrev.onclick = function(){
			prevIndex = nowIndex;
			nowIndex --;
			if(nowIndex < 0){
				if(bool){
					nowIndex = 0;
				}else{
					nowIndex = bLi.length - 1;
				}
			}
			bLi[prevIndex].className = "";
			bLi[nowIndex].className = "active";
			eTit.innerHTML = nowIndex + 1 + "/4";
		};

		cNext.onclick = function(){
			prevIndex = nowIndex;
			nowIndex ++;
			if(nowIndex > bLi.length - 1){
				if(bool){
					nowIndex = bLi.length - 1;
				}else{
					nowIndex = 0;
				}
			}
			bLi[prevIndex].className = "";
			bLi[nowIndex].className = "active";
			eTit.innerHTML = nowIndex + 1 + "/4";
		};

		dBtn[0].onclick = function(){
			bool = true;
			this.className = "active";
			dBtn[1].className = "";
		};

		dBtn[1].onclick = function(){
			bool = false;
			this.className = "active";
			dBtn[0].className = "";
		};