;(function(){

	function extend(defaultSetting,userSetting){

		//创建一个空对象

		var obj={};

		for(var p in defaultSetting){

			if(userSetting.hasOwnProperty(p)){ //(1)

				obj[p] = userSetting[p];

			}

			else{							   //(2)

				obj[p] = defaultSetting[p];

			}

		}

		return obj;

	}

	function Slider(contentId,userSetting={}) {

		var defaultSetting = {

			speed:2000,

			currentIndex:0,

			isAuto:true,

			isTxt:true,

			directorPos:"center"

		}

		this.setting = extend(defaultSetting,userSetting);//综合考虑用户的设置和默认值后得到的。

		this.timer = null;		//定时器

		// 获取整体轮播图的容器

		this.container = document.getElementById(contentId);

		if(this.container == null){

			console.info("没有这个id，你看清楚再来");

			return {};

		}

		// 获取图片集合

		this.lis          = this.container.querySelector(".slider-content").querySelectorAll("li");

		this.len          = this.lis.length;//图片的张数

		this.directors    = []; //角标；

		this.currentIndex = this.setting.currentIndex;			//当前显示的那张图的编号

		this.speed        = this.setting.speed; 				// 每隔2s,切换一张图 2000ms 单位是ms

		//this.dom();

		dom.call(this);				//动态创建dom元素

		//this.init();

		init.call(this);			//this.初始化，绑定一些事件

		this.goto(this.currentIndex);	//显示当前图片

		// if(this.setting.isAuto)

		// {

		// 	this.auto();

		// }

		this.setting.isAuto &&  this.auto(); //开始自动播放

	}

	function dom(){

		var that = this;

		//创建按钮，设置属性，添加事件响应，添加到外部的容器中

		this.btnRight     = document.createElement("span");

		this.btnRight.className = "btn btn-right";

		this.btnRight.innerHTML = "后";

		this.btnRight.onclick =function(){

			that.next();

		}

		this.btnLeft     = document.createElement("span");

		this.btnLeft.className = "btn btn-left";

		this.btnLeft.innerHTML = "前";

		this.btnLeft.onclick =function(){

			that.prev();

		}

		this.container.appendChild(this.btnRight);

		this.container.appendChild(this.btnLeft);

		//创建文字区域，设置属性，添加到外部的容器中

		if( this.setting.isTxt){

			this.txtArea = document.createElement("p");

			this.txtArea.className = "txt";

			this.txtArea.innerHTML = "";

			this.container.appendChild(this.txtArea);

		}

		//先创建角标的容器 ol

		var ol = document.createElement("ol");

		ol.className = "slider-director";

		if(this.setting.directorPos == "center"){

			ol.style.left = "50%";

			ol.style.right="auto";

			ol.style.transform = "translateX(-50%) ";

		}

		else if(this.setting.directorPos == "right"){

			ol.style.left = "auto";

			ol.style.right="20px";

		}

		else{

			ol.style.left = "50%";

			ol.style.right="auto";

			ol.style.transform = "translateX(-50%) ";

		}

		for(var i=0;i<this.len;i++){

			//用循环去创建多个li

			var li = document.createElement("li");

			li.innerHTML = i+1;

			this.directors.push(li);

			//添加到ol中

			ol.appendChild(li);

		}

		//ol添加到轮播图的容器中

		this.container.appendChild(ol);

	}

function init(){

		console.info("init",this)

		var that = this;

		for (var i = 0; i < this.directors.length; i++) {

			this.directors[i].onmouseover = function(abc){

				return function(){

					that.goto(abc);

				}

			}(i)

			// this.directors[i].abc = i;

			// this.directors[i].onmouseover = function(){

			// 	that.goto(this.abc);

			// }

		}

		this.container.onmouseenter = function(){

			that.pause();

		}

		this.container.onmouseleave = function(){

			that.continue();

		}

	}

// 上一张（）

	Slider.prototype.prev = function(){

		//更新currentIndex

		this.currentIndex -= 1;

		if(this.currentIndex < 0)

			this.currentIndex = this.len - 1;

		this.goto(this.currentIndex)

	}

	//下一张（）

	Slider.prototype.next = function(){

		//更新currentIndex

		this.currentIndex += 1;

		if(this.currentIndex >= this.len)

			this.currentIndex = 0;

		this.goto(this.currentIndex);

	}

	//跳到指定张  n：[0,this.len-1]

	Slider.prototype.goto = function (n) {

		this.currentIndex = n ;	//更新currentIndex

		//console.info(this.currentIndex);

		// 把所有的图片改成display：none

		for(var i = 0;i<this.len;i++){

			this.lis[i].style.opacity = 0;

			//this.lis[i].style.display="none";

		}

		// 把当前currentIndex改成display:block;

		// this.lis[n].style.display = "block";

		this.lis[n].style.opacity = 1;

		for(var i =0; i<this.len;i++){

			this.directors[i].className = ""; //清除所有的className

		}

		this.directors[n].className="current";

		//更新p标签中的内容

		this.txtArea && ( this.txtArea.innerHTML = this.lis[n].querySelector("img").getAttribute("alt") );//当前图片中的alt属性

	}

	//自动播放（）

	Slider.prototype.auto = function () {

		var that = this;

		clearInterval(this.timer);

		this.timer = setInterval(function(){

			that.next();

		},this.speed);

	}

	//暂停播放（）

	Slider.prototype.pause = function(){

		clearInterval(this.timer)

	}

	//继续方法（）

	Slider.prototype.continue = function(){

		this.auto();

	}

	window.Slider = Slider;

})();

function extend(defaultSetting,userSetting){

	//创建一个空对象

	var obj={};

	for(var p in defaultSetting){

		if(userSetting.hasOwnProperty(p)){ //(1)

			obj[p] = userSetting[p];

		}

		else{							   //(2)

			obj[p] = defaultSetting[p];

		}

	}

	return obj;

}