一个javascript继承和使用的例子
继承可以帮助我们实现代码的重用，把对象的属性写入构造函数，对象的方法写入原型后，以下例子演示继承的使用：
示例的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:;
padding:;
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;
}
一个javascript继承和使用的例子的更多相关文章
- javascript继承的三种模式
javascript继承一般有三种模式:组合继承,原型式继承和寄生式继承: 1组合继承:javascript最为广泛的继承方式通过原型链实现对原型属性和方法的继承,通过构造函数实现对实例属性的继承,同 ...
- 图解JavaScript 继承
JavaScript作为一个面向对象语言,可以实现继承是必不可少的,但是由于本身并没有类的概念(不知道这样说是否严谨,但在js中一切都类皆是对象模拟)所以在JavaScript中的继承也区别于其他的面 ...
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- 【转载】JavaScript继承详解（二）
这一章我们将会重点介绍JavaScript中几个重要的属性(this.constructor.prototype), 这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用. ...
- 【转载】JavaScript继承详解一
面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...
- JavaScript继承详解
面向对象与基于对象 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继 ...
- 闲聊javascript继承和原型
javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instance ...
- JavaScript继承详解（四）
在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...
随机推荐
- jQuery入门第一天-（一个菜鸟的不正经日常）
jQuery的初步认识 菜鸟Q1:什么是jQuery? jQuery就是一个JavaScript函数库,没什么 特别的. 菜鸟Q2:jQuery能做什么?jQuery是做什么的? jQuery本身就是 ...
- 第31题：LeetCode946. Validate Stack Sequences验证栈的序列
题目 给定 pushed 和 popped 两个序列,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true:否则,返回 false . 示例 1: 输入: ...
- 51nod——1402最大值、2479小b分糖果 （套路）
1402最大值:正向从1到n,如果没有限制,就依次递增1,如果有限制,就取那个限制和递增到这的最小值.这样保证1和每个限制点后面都是符合题意的递增,但是限制点前面这个位置可能会有落差(之前递增多了). ...
- PowerDesigner导入Excel模板生成实体
在Excel里整理好的表模型数据,可直接导入PowerDesigner.此功能通过PowerDesigner的脚本功能来实现,使用起来也简单.具体操作方法: 打开PowerDesign ...
- Django之视图和URL配置
1.在创建项目时,Django会自动创建URL配置,在urls.py文件中 文件的默认内容如下所示: """mysite URL Configuration The ur ...
- 课时5.什么是URL（理解）
其实浏览器的地址栏中输入的地址就是一个URL. http://127.0.0.1/index.html(浏览器会自动添加:80) http://127.0.0.1:80/index.html(这是浏览 ...
- url传参及重定向
成功跳转$this -> success('提示语',跳转路径,返回的数据,时间,发送的 Header 信息)跳转失败$this -> error('提示语',跳转路径,返回的数据,时间, ...
- 单片机入门学习笔记6：新唐单片机N76E003
学习新唐单片机是从2018年3月开始的,之前一点也不懂这一块单片机,之后脉络变的越来越清晰. 由于N76E003档次太低,新塘科技官方的管脚配置,芯片选型……都没有这一块芯片,资料唯独只有:芯片的数据 ...
- Benelux Algorithm Programming Contest 2014 Final
// Button Bashing (bfs) 1 #include <iostream> #include <cstdio> #include <cstring> ...
- Python linecache模块
Table of Contents 1. linecache 1.1. 其它 2. 参考资料 linecache 今天分享一个python的小模块: linecache, 可以用它方便地获取某一文件某 ...