继承可以帮助我们实现代码的重用，把对象的属性写入构造函数，对象的方法写入原型后，以下例子演示继承的使用：
示例的css和js在后
父实例，得到一个间隔1s的轮播：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>parent</title> <script src="js/lanquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/lantrap.css" /> </head> <body> <script type="text/javascript"> window.onload = function() { var ar = ['img/font-1.jpg', 'img/font-3.jpg']; new Move(ar); } </script> </body> </html>
现在我们要得到一个间隔为3s的轮播，只需要：
1 使用 父类.call(this,属性) 的方式继承属性；
2 使用 拷贝继承 for(var i in 父类.prototype) {子类.prototype[i] = 父类.prototype[i]｝
或者类式继承或者原型继承的方法继承对象方法
3 改变继承的具体方法 子类.prototype.具体方法=function(){}来改变对象方法
三步得到间隔为3s的轮播子示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>child</title> <script src="js/lanquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/lantrap.css" /> </head> <body> <script type="text/javascript"> window.onload = function() { var ar = ['img/font-1.jpg', 'img/font-3.jpg']; function SubMove(id) { Move.call(this, id); }
//拷贝继承 for(var i in Move.prototype) { SubMove.prototype[i] = Move.prototype[i]; }
//类式继承，引用，子类改变会影响父类,通过构建中间类
// function middleMove(){};
// middleMove.prototype=Move.prototype;
// SubMove.prototype= new middleMove();
// SubMove.prototype.constructor=middleMove;
SubMove.prototype.moveOut = function() { clearInterval(this.rotateImg.timer); var this1 = this; this.arrows.style.display = "none"; this.rotateImg.timer = setInterval(function() { this1.autoplay(this1.num); }, 3000) } new SubMove(ar); } </script> </body> </html>
javascript代码：
function animation(obj, target) { var speed; clearInterval(obj.timer); obj.timer = setInterval(function() { speed = (target - obj.offsetLeft) / 10; speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed)); obj.style.left = obj.offsetLeft + speed + "px"; if(obj.offsetLeft == target) { clearInterval(obj.timer); } }, 20) } function Move() { this.imgArr = []; if(Array.isArray(arguments[0])) { console.log('is array'); this.imgArr = arguments[0]; } else { if(arguments.length <= 1) { alert('请指定至少两张图片'); } for(var a = 0; a < arguments.length; a++) { this.imgArr.push(arguments[a]); } } this.makeDiv(); var rotateImg = document.getElementById('rotateImg'); this.rotateImg = rotateImg; this.imgUl = rotateImg.children[0].children[0]; this.imgList = rotateImg.children[0].children[0].children; this.dotUl = rotateImg.children[1]; this.arrows = rotateImg.children[2]; this.prev = this.arrows.children[0]; this.next = this.arrows.children[1]; this.width = rotateImg.offsetWidth; this.num = 0; //clone first image var newLiFirstImgClone = this.imgUl.children[0].cloneNode(true); this.imgUl.appendChild(newLiFirstImgClone); //1、create dot according to number of images and append it for(var i = 1; i < this.imgList.length; i++) { var newDot = document.createElement("li"); newDot.innerHTML = i; this.dotUl.appendChild(newDot); } var _this = this; this.dotLiArray = this.dotUl.children; this.light(this.num); //2 click dot,transform image and light dot for(var k = 0; k < this.dotLiArray.length; k++) { this.dotLiArray[k].index = k; this.dotLiArray[k].onclick = function() { _this.num = this.index; _this.light(_this.num); animation(_this.imgUl, -_this.num * _this.width); } } //3 next this.next.onclick = function() { _this.autoplay(); } //自动播放 rotateImg.timer = setInterval(function() { _this.autoplay(this.num); }, 1000); //4、previous this.prev.onclick = function() { _this.movePrev(); } //5 when mouse move over elements,stop rotate and show arrow rotateImg.onmouseover = function() { _this.moveOver(); } //6 when mouse out star rotate and hide arrow rotateImg.onmouseout = function() { _this.moveOut(); } } Move.prototype.light = function(index) { for(var j = 0; j < this.dotLiArray.length; j++) { this.dotLiArray[j].className = ""; } this.dotLiArray[index].className = "light"; } Move.prototype.autoplay = function(num) { this.num++; if(this.num == this.imgUl.children.length - 1) { this.light(0); //if img comes to the clone img,light the first dot } else if(this.num == this.imgUl.children.length) { //if img is in the end ,set position to second img in a flash this.imgUl.style.left = 0; this.num = 1; this.light(this.num); } else { this.light(this.num); } animation(this.imgUl, -this.num * this.width); } Move.prototype.movePrev = function() { this.num--; if(this.num == -1) { //if image comes to the end then transform it before the clone image this.imgUl.style.left = -this.width * (this.imgUl.children.length - 1) + "px"; //change img position suddenly this.num = this.imgUl.children.length - 2; } this.light(this.num) animation(this.imgUl, -this.num * this.width); } Move.prototype.moveOver = function() { clearInterval(this.rotateImg.timer); this.arrows.style.display = "block"; } Move.prototype.moveOut = function() { clearInterval(this.rotateImg.timer); var this1 = this; this.arrows.style.display = "none"; this.rotateImg.timer = setInterval(function() { this1.autoplay(this1.num); }, 1000) } Move.prototype.makeDiv = function() { var div = document.createElement('div'); var str = ''; for(var i = 0; i < this.imgArr.length; i++) { str += '<li><a href="#"><img src="' + this.imgArr[i] + '" alt="" /></a></li>' } var rlis = str; var slide = ' <div id="rotateImg"><div id="imgcontainer"><ul>' + rlis + '</ul></div><ul></ul><div class="arrows"><div class="prev"><</div><div class="next">></div></div></div>'; div.innerHTML = slide; document.body.append(div); }
css样式：
* { margin: 0; padding: 0; list-style: none; } #rotateImg { width: 400px; height: 220px; margin: 100px auto; position: relative; font: 12px helvetica; overflow: hidden; } img { width: 400px; height: 220px; } #rotateImg>ul { position: absolute; bottom: 15px; left: 50%; margin-left: -60px; } #rotateImg>ul>li { float: left; /*list-style: none;*/ cursor: pointer; width: 16px; height: 16px; margin-right: 10px; text-align: center; line-height: 16px; border-radius: 8px; background: #fff; } #rotateImg>ul>li.light { background: red; color: #fff; } #imgcontainer { width: 100%; } #imgcontainer>ul { width: 1000%; height: 220px; list-style: none; position: absolute; } #imgcontainer>ul li { float: left; } .arrows { position: absolute; width: 100%; height: 40px; top: 50%; margin-top: -20px; display: none; color: red; } .arrows .prev, .arrows .next { height: 40px; width: 40px; line-height: 40px; text-align: center; font: 600 30px/40px "simsun"; background: rgba(0, 0, 0, 0.2); cursor: pointer; } .arrows .prev { float: left; } .arrows .next { float: right; }