JavaScript完整轮播图

JavaScript完整轮播图

1. 先获需要用的到标签
2. 设置一个全局变量用来保存鼠标进入的当前li的索引值
3. 创建小按钮（根据ul中li的个数来创建）
   1. 创建li并加入到ol中
   2. 在ol中的li标签上添加一个自定义属性，存储索引值
   3. 注册鼠标进入事件
   4. 移除并创建当前li的背景颜色
   5. 获取当前索引值
   6. 移动ul
4. 设置ol中第一个li有背景颜色
5. 克隆一个ul中第一个li，加入到ul中的最后
6. 鼠标进入到box的div显示左右焦点的div
7. 鼠标离开到box的div隐藏左右焦点的div
8. 右边按钮
   1. 当移动到最右边的照片时重置索引值，并且跳转到最左边的图片，索引值自增并移动图片animate（）
   2. 如果当索引值pic==5说明，此时显示第六个图片（内容是第一张图片，第一个按钮有颜色，需要干掉第五个按钮的颜色并设置第一个按钮的颜色
   3. 否则干掉所有按钮的颜色，当前按钮显示颜色
9. 左边按钮
   1. 判断是否是第一张照片，如果是就将索引值设置到ol中的最后一个li索引值，并跳转到这张图片，索引值自减并移动图片
   2. 干掉所有按钮的颜色，当前按钮显示颜色
10. 设置鼠标离开自动播放以及鼠标进入停止的定时器

// 获取最外面的div
	var box = my$("box");
	// 获取相框
	var screen = box.children[0];
	// 获取相框的宽度
	var imgWidth = screen.offsetWidth;
	// 获取ul
	var ulObj = screen.children[0];
	// 获取ul中的所有的li
	var list = ulObj.children;
	// 获取ol
	var olObj = screen.children[1];
	// 焦点的div
	var arr = my$("arr");
	
	var pic = 0;// 全局变量
	
	// 创建小按钮---根据ul中的li个数
	for(var i = 0; i < list.length; i++) {
		// 创建li，加入到ol中
		var liObj = document.createElement("li");	
		olObj.appendChild(liObj);
		liObj.innerHTML = (i + 1);
		
		// 在每个ol中的li标签上添加一个自定义属性，存储索引值
		liObj.setAttribute("index", i);
		// 注册鼠标进入事件
		liObj.onmouseover = function () {
			// 先干掉所有的ol中的li的背景颜色
			for( var j = 0; j < olObj.children.length; j++) {
				// olObj.children[i].className = "";
				olObj.children[j].removeAttribute("class");
			}
			// 设置当前鼠标进来的li的颜色
			this.className = "current";
			// this.setAttribute("class", "current");
			// 获取鼠标进入的li的当前索引值
			pic = this.getAttribute("index");
			// 移动这个ul
			animate(ulObj, -pic * imgWidth);
		};
		
	}
	// 设置ol中第一个li有背景颜色
	olObj.children[0].className = "current";
	// olObj.children[0].setAttribute("class", "current");
	
	// 克隆一个ul中第一个li，加入到ul中的最后
	ulObj.appendChild(ulObj.children[0].cloneNode(true));
	
	// 自动播放
	var timeId = setInterval(clickHandle, 1000);
	
	
	// 鼠标进入到box的div显示左右焦点的div
	box.onmouseover = function () {
		arr.style.display = "block";
		// 鼠标进入废掉之前的定时器
		clearInterval(timeId);
	};
	// 鼠标离开到box的div隐藏左右焦点的div
	box.onmouseout = function () {
		arr.style.display = "none";
		// 鼠标离开自动播放
		timeId = setInterval(clickHandle, 1000);
	};
	// 右边按钮
	my$("right").onclick = clickHandle;
	 function clickHandle() {
		if(pic == list.length - 1) {
			pic = 0;
			ulObj.style.left = 0 + "px";
		}
		pic++;
		animate(ulObj, -pic * imgWidth);
		// 如果pic==5说明，此时显示第六个图片（内容是第一张图片，第一个按钮有颜色
		if(pic == list.length - 1) {
			// 第五个按钮颜色干掉
			olObj.children[olObj.children.length - 1].className = "";
			// 第一个按钮颜色设置上
			olObj.children[0].className = "current";
		}
		else{
			// 干掉所有小按钮的背景颜色
			for(var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].className = "";
			}
			// 当前按钮显示颜色
			olObj.children[pic].setAttribute("class", "current");
			// olObj.children[pic].className = "current";
		}
		
	};
	// 左边按钮
	my$("left").onclick = function () {
		if(pic == 0) {
			pic = olObj.children.length;
			ulObj.style.left = -pic * imgWidth + "px";
		}
		pic--;
		animate(ulObj, -pic * imgWidth);
		// 设置小按钮的颜色---所有小按钮干掉颜色
		for(var i  = 0; i < olObj.children.length; i++) {
			olObj.children[i].removeAttribute("class");
		}
		// 当前的pic索引对应的按钮设置颜色
		olObj.children[pic].className = "current";
	};
	

	
	
	// 设置任意一个元素,移动到指定的目标位置
	function animate(element, target) {
		// 保证点多少次按钮都只有一个定时器
		clearInterval(element.timeId);
		// 定时器的id值存储到了对象的一个属性中
		element.timeId = setInterval(function () {
			// 获取元素的当前位置,数字类型
			var current = element.offsetLeft;
			// 每次移动的距离
			var step = 10;
			if (current < target) {
				step = step;
			}
			else {
				step = -step;
			}
			// 当前移动的位置
			current += step;
			if(Math.abs(current - target) > Math.abs(step)) {
				element.style.left = current + "px";
			}
			else {
				// 清理定时器
				clearInterval(element.timeId)
				element.style.left = current + "px";
				// 直接达到目的
				element.style.left = target + "px";
			}
		}, 10);
	}

<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>