<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new+call(this)组合应用再探讨实例</title>
    <script type="text/javascript">
    /***
    *参数:
    *imgArr:图片组
    *container:轮播图的父容器
    *arrow:左右箭头图片组
    */
    //创建图片轮播基类
    var LoopImages = function(imgArr,container){
        this.imagesArr = imgArr;
        this.container = container;
    }
    LoopImages.prototype = {
        //创建轮播图片
        createImage:function(){
            console.log('createLoopImages');
        },
        //切换下一张图片
        changeImage:function(){
            console.log('changeLoopImages');
        }
    }
    //创建上下滑动子类
    var SlideLoopImg = function(imgArr,container){
        //构造函数继承父类图片轮播类
        LoopImages.call(this,imgArr,container);
    }
    SlideLoopImg.prototype = new LoopImages();//这句加上上面的call(this)就是组合式继承了
    //先new继承父类原型,再创建子类的原型方法,这个顺序一定得这样写,否则报错
    SlideLoopImg.prototype.changeImage = function(){
        console.log('SlideLoopImg changeImages');
    }
    //创建渐隐渐显子类
    var FadeLoopImg = function(imgArr,container,arrow){
        LoopImages.call(this,imgArr,container);
        this.arrow = arrow;
    }
    FadeLoopImg.prototype = new LoopImages();
    FadeLoopImg.prototype.changeImage = function(){
        console.log('FadeLoopImg changeImages');
    }

    //测试用例
    var fadeimg = new FadeLoopImg(['01.jpg','02.jpg','03.jpg','04.jpg'],'slide',['left.jpg','right.jpg']);//'slide'是父容器名字
    fadeimg.changeImage();

    //本例已经通过验证
    </script>
</head>
<body>
    
</body>
</html>

posted on 2015-11-05 15:00  杨杨0708  阅读(158)  评论(0编辑  收藏  举报