window.onload = function() {
	var topPlayer = function(){
		var js_silder = $("div.js-silder"), 
		silder_main = $("div.silder-main"), 
		silder_main_imgs = silder_main.children, 
		imgs_len = silder_main_imgs.length,
		imgs_width = silder_main_imgs[0].offsetWidth, 
		js_silder_ctrl = js_silder.children[1];
		// 生成小的点击按钮
		for (var i = 0; i < imgs_len; i++) {
			silder_main_imgs[i].index = i;

			// 将除第一张之外的全部图片都移到右边
			if (i != 0) {
				silder_main_imgs[i].style.left = imgs_width + "px";
			}
		}

		// 获取所有的点击按钮
		var silder_ctrl_spans = js_silder_ctrl.children, 
		    iNow = 0;// 控制图片播放
		for (var j = 0, len = silder_ctrl_spans.length; j < len; j++) {

			silder_ctrl_spans[j].onclick = function() {
				var classname = this.className, thatNum = this.innerHTML - 1;
				if (classname == "silder-ctrl-prev") {// 左边按钮，即上一张按钮
					// 当前这张图片往右边边出去
					animate(silder_main_imgs[iNow], {
						"left" : imgs_width
					});

					iNow--;
					if (iNow < 0) {
						iNow = imgs_len - 1;
					}
					/*
					 * 上一张图片进来之前先将它移到最左边，这样就能保证无限循环，如果不这样设置，那么第一次到头后就不会有从左边出来的效果了。
					 */
					silder_main_imgs[iNow].style.left = -imgs_width + "px";
					// 上一张图片进来
					animate(silder_main_imgs[iNow], {
						"left" : 0
					});
				} else if (classname == "silder-ctrl-next") {// 右边按钮，即下一张按钮
					play();
				} else {
					/* 如果点击的这个数字按钮的数值大于当前图片的索引，那么图片应该从右边出来 */
					if (thatNum > iNow) {
						animate(silder_main_imgs[iNow], {
							"left" : -imgs_width
						});
						silder_main_imgs[thatNum].style.left = imgs_width + "px";
						animate(silder_main_imgs[thatNum], {
							"left" : 0
						});
					} else if (thatNum < iNow) {
						animate(silder_main_imgs[iNow], {
							"left" : imgs_width
						});
						silder_main_imgs[thatNum].style.left = -imgs_width + "px";
						animate(silder_main_imgs[thatNum], {
							"left" : 0
						});
					}
					/* 必须要把iNow 设置为 thatNum，因为下一次轮播是从当前的这张图片开始的 */
					iNow = thatNum;
				}

				
			}

		}

		// 自动播放
		var timer = null;
		timer = setInterval(function() {
			play();
			//setCtrlBtnStyle(iNow + 1);
		}, 10000);

		// 当鼠标放在图片上的时候停止自动播放
		js_silder.onmouseover = function() {
			clearInterval(timer);
		}
		// 当鼠标离开图片的时候自动播放
		js_silder.onmouseleave = function() {
			clearInterval(timer);
			timer = setInterval(function() {
				play();
				//setCtrlBtnStyle(iNow + 1);
			}, 10000);
		}

		function play() {
			// 当前这张图片往左边出去
			animate(silder_main_imgs[iNow], {
				"left" : -imgs_width
			});

			iNow++;
			if (iNow > imgs_len - 1) {
				iNow = 0;
			}
			/*
			 * 下一张图片进来之前先将它移到最右边，这样就能保证无限循环，如果不这样设置，那么第一次到尾后就不会有从右边出来的效果了。
			 */
			silder_main_imgs[iNow].style.left = imgs_width + "px";
			// 下一张图片进来
			animate(silder_main_imgs[iNow], {
				"left" : 0
			});
		}
	}
	/* 动画函数 */
	function animate(ele, attrsJson, fn) {
		clearInterval(ele.timer);

		ele.timer = setInterval(
				function() {
					var flag = true;
					for ( var attr in attrsJson) {
						var curStyle = parseInt(getStyle(ele, attr)), step = (parseInt(attrsJson[attr]) - curStyle) / 10;

						step = step > 0 ? Math.ceil(step) : Math.floor(step);

						if (curStyle != attrsJson[attr]) {
							flag = false;
						}

						if (attr == "zIndex") {
							ele.style.zIndex = attrsJson[attr];
						} else {
							ele.style[attr] = curStyle + step + "px";
						}

					}
					if (flag) {
						clearInterval(ele.timer);
						if (fn) {
							fn.call(window);
						}
					}
				}, 20);
	}
	/* 获取元素 */
	function $(selector) {
		var classSelectSign = selector.indexOf("."), idSelectSign = selector
				.indexOf("#");

		// id选择器
		if (idSelectSign > -1) {
			return document.getElementById(selector.substr(1));
		}

		// class选择器
		if (classSelectSign > -1) {
			var classSelect = selector.substr(classSelectSign + 1);

			// 支持通过class获取元素的浏览器
			if (document.getElementsByClassName) {
				var eles = document.getElementsByClassName(classSelect);
				if (eles.length == 1) {
					return eles[0];
				} else {
					return eles;
				}
			} else {
				var baseEleName = classSelectSign > 0 ? selector.substr(0,
						classSelectSign) : "*", eles = document
						.getElementsByTagName(baseEleName), elesResult = [];

				for (var i = 0, len = eles.length; i < len; i++) {
					if (hasClass(eles[i], classSelect)) {
						elesResult.push(eles[i]);
					}
				}
				if (elesResult.length == 1) {
					return elesResult[0];
				} else {
					return elesResult;
				}
			}
		}

		// 标签选择器
		return document.getElementsByTagName(selector);
	}

	/* 判断元素是否有某个class */
	function hasClass(ele, classnameparam) {
		var classname = ele.className
		classArr = classname.split(" ");
		for ( var i in classArr) {
			if (classArr[i] == classnameparam) {
				return true;
			}
		}
		return false;
	}

	/* 获取样式 */
	function getStyle(ele, attr) {
		if (ele.currentStyle) {
			return ele.currentStyle[attr];
		} else {
			return ele.ownerDocument.defaultView.getComputedStyle(ele, null)[attr];
		}
	}
	
	topPlayer();
	
	var siderPlayer = function(){

		var js_silder = $("div.js-silder-left"), 
		silder_main = $("div.silder-main-left"), 
		silder_main_imgs = silder_main.children, 
		imgs_len = silder_main_imgs.length,
		imgs_width = silder_main_imgs[0].offsetWidth, 
		js_silder_ctrl = js_silder.children[1];
		// 生成小的点击按钮
		for (var i = 0; i < imgs_len; i++) {
			silder_main_imgs[i].index = i;

			// 将除第一张之外的全部图片都移到右边
			if (i != 0) {
				silder_main_imgs[i].style.left = imgs_width + "px";
			}
		}
		iNow = 0;// 控制图片播放

		// 自动播放
		var timer = null;
		timer = setInterval(function() {
			play();
			//setCtrlBtnStyle(iNow + 1);
		}, 10000);

		// 当鼠标放在图片上的时候停止自动播放
		js_silder.onmouseover = function() {
			clearInterval(timer);
		}
		// 当鼠标离开图片的时候自动播放
		js_silder.onmouseleave = function() {
			clearInterval(timer);
			timer = setInterval(function() {
				play();
				//setCtrlBtnStyle(iNow + 1);
			}, 10000);
		}

		function play() {
			// 当前这张图片往左边出去
			animate(silder_main_imgs[iNow], {
				"left" : -imgs_width
			});

			iNow++;
			if (iNow > imgs_len - 1) {
				iNow = 0;
			}
			/*
			 * 下一张图片进来之前先将它移到最右边，这样就能保证无限循环，如果不这样设置，那么第一次到尾后就不会有从右边出来的效果了。
			 */
			silder_main_imgs[iNow].style.left = imgs_width + "px";
			// 下一张图片进来
			animate(silder_main_imgs[iNow], {
				"left" : 0
			});
		}
	}
	
	siderPlayer();
}