轮播------位置轮播

位置轮播法: 只有三个位置供图片来回切换。其他的由于绝对定位被遮挡住了。

类似于上图，图片在1,2进行交换，在显示区域显示。

原理：

<---右拉步骤：老图拉到2，再把新图拉到1等待显示，新图再拉到显示区域。

--->左拉步骤： 老图拉到1，再把新图拉到2等待，新图再拉到显示区域。

底部小圆点监听时：需要判断点击的圆点位置在当前图片的左边还是右边。

如果在左边就实现右拉的步骤，如果在右边就实现左拉的步骤。

html:

<div class="carousel" id="carousel">
		<div class="btns">
			<a href="javascript:;" class="leftBtn" id="leftBtn"></a>
			<a href="javascript:;" class="rightBtn" id="rightBtn"></a>
		</div>
		<div class="imageList" id="imageList">
			<ul>
				<li class="first"><a href="#"><img src="images/0.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
				<li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div class="circles" id="circles">
			<ol>
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>

js:  我使用的图片时560 x 300

imgwidth = 560;

var carousel = document.getElementById("carousel");
		var leftBtn = document.getElementById("leftBtn");
		var rightBtn = document.getElementById("rightBtn");
		var circles = document.getElementById("circles");
		var imageList = document.getElementById("imageList");
		var imageUL = imageList.getElementsByTagName("ul")[0];
		var imageLis = imageUL.getElementsByTagName("li");
		var circlesLis = circles.getElementsByTagName("li");

		var idx = 0;
		var imgwidth = 560;
		var imgheight = 300;
		var interval = 1000;

		rightBtn.onclick = function  () {
			if(imageLis[idx].isanimated) return;
			//先把老图片拉到-560px
			animate(imageLis[idx],{"left":-imgwidth},interval);
			//再把新的信号量拉到等待区
			idx++;
			if(idx > 4){
				idx = 0;
			}
			imageLis[idx].style.left = imgwidth +"px";
			//再把新的信号量拉到0
			animate(imageLis[idx],{"left":0},interval);
			changeCircles();

		}
		leftBtn.onclick = function  () {
			if(imageLis[idx].isanimated) return;
			//先把老图拉到-560px
			animate(imageLis[idx],{"left":imgwidth},interval);
			//再把新图拉到等待区
			idx--;
			if(idx < 0){
				idx = 4;
			}
			imageLis[idx].style.left = -imgwidth+"px";
			//再把新图拉到0
			animate(imageLis[idx],{"left":0},interval);
			changeCircles();

		}

		for (var i = 0; i <circlesLis.length ; i++) {
			circlesLis[i].index = i;//防止闭包
			circlesLis[i].onclick = function(){
				//截流
				if(imageLis[idx].isanimated) return;
				if(this.index > idx){
					animate(imageLis[idx],{"left":imgwidth},interval);
					idx= this.index;
					imageLis[idx].style.left = -imgwidth +"px";
					animate(imageLis[idx],{"left":0},interval);	
					changeCircles();
				}else if(this.index < idx){
					animate(imageLis[idx],{"left":-imgwidth},interval);
					idx = this.index;
					imageLis[idx].style.left = imgwidth +"px";
					animate(imageLis[idx],{"left":0},interval);
					changeCircles();
				}else{
					alert("就是这个图，点啥啊点");
				}
			}
		}


	function changeCircles(){
			//排他
			for (var i = 0; i < circlesLis.length; i++) {
				circlesLis[i].className = "";
			}
			circlesLis[idx].className = "cur";
		}