JavaScript面向对象的方式开发轮播图插件

轮播图是很多页面必不可少的组件。这里来使用面向对象方式开发一个插件。减去开发的痛楚

首先需要寻找对象：只有一个对象，轮播图！关键点在于找到这个对象所拥有的属性以及方法，通过代码实现出来，这是面向对象最核心的本质；

其属性有：

图片集合；按钮；角标；文本区；当前面的编号；切换速度；

方法有： 

上一张（）下一张（）暂停播放（） 自动播放（）继续播放（）调到指定的图片（）；这些方法是重中之重；

轮播图的基本结构如下

    <div class="slider" data-speed="3000" data-currentIndex="1" data-isTxt="true" data-isAuto="true">
        <ul class="slider-content">
            <li><a href=""><img src="./img/less.jpg"   alt="让css可以编程"></a></li>
            <li><a href=""><img src="./img/nodejs.jpg" alt="nodejs.jpg"></a></li>
            <li><a href=""><img src="./img/react.jpg"  alt="react.jpg"></a></li>
            <li><a href=""><img src="./img/vue.jpg"  alt="vuejs.jpg"></a></li>
        </ul>
    </div>

轮播图的css如下

    ul,li,ol,p{list-style: none;margin:0;padding:0;}
        .slider{position:relative;width: 800px;height: 400px;margin:50px auto;}
        .slider-content li{position: absolute;left:0;top:0;transition: opacity .5s;}
        img{width: 800px;height: 400px;}
        .btn{position: absolute;width:50px;height: 50px;border-radius: 25px;top:50%;
            transform: translateY(-50%);
            /*margin-top:-25px; */
            background-color: #fff;color:black; }
        .btn-left{left:30px;}
        .btn-right{right:30px;}
        ol{text-align:center;position: absolute;height: 20px;background-color: rgba(255,255,255,.5);bottom:15px;}
        ol li{display: inline-block;margin:3px 5px 0;width: 14px;height: 14px;border-radius: 7px;background-color: #000;font-size: 12px;transition: transform .5s}
        .txt{position: absolute;bottom:0px;text-indent:20px;line-height:40px;height: 40px;width: 100%;background-color:rgba(0,0,0,.5); color: #fff;font-size: 20px; }
        .current{background-color: red;transform: scale(2);}/*当前的角标*/

接下来就是对轮播图的js部分方法和属性的封装

;(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;

})();

　　

用户自定义配置的js

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;
}