您的位置：首页 > Web前端 > JavaScript

一个javascript继承和使用的例子

2017-07-28 16:22 771 查看

继承可以帮助我们实现代码的重用，把对象的属性写入构造函数，对象的方法写入原型后，以下例子演示继承的使用：

示例的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;
}

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航