javascript_面向对象_轮播图（淡入淡出）_ES3_使用prototype和构造函数

解释：

       1、该轮播图的切换效果是淡入淡出

       2、该轮播图使用了prototype属性，解决了上一版“http://blog.csdn.net/jiang7701037/article/details/78963256”

javascript_面向对象_轮播图（淡入淡出）没有使用prototype的问题

效果图：

代码：

HTML代码：

js代码：sliderShowPlugin.js

//1、定义类
function SlideShow(obj) {
    //1）、属性
    this.boxDom = obj.boxDom;
    this.width = obj.width;
    this.height = obj.height;
    //要播放的图片数组
    this.imgs = obj.imgs;
    this.ord = 0;//代表当前图片的序号，从0开始。
    this.myTimer = null;

    this.timespace = obj.timespace;

    //轮播图中的按钮
    this.btnWidth = obj.btnWidth;
    this.btnHeight = obj.btnHeight;
    this.btnColor = obj.btnColor;//原始颜色
    this.btnHighColor = obj.btnHighColor;//高亮颜色

    this.initUI();
    this.initEvent();
    this.autoChange();
}


    //2）、方法（函数）
SlideShow.prototype.initUI = function(){
        //一、创建所有的HTML元素，并设置css样式
        //1、创建img标记
        for(let i=0;i{
            //处理两个数据：一个是要淡出的图片序号，一个是要淡入的图片序号。
            let outord = this.ord;//ord++之前的ord就是要出去的ord
        //1、改变序号
        this.ord++;//4
        //2、处理边界
        if(this.ord>this.imgs.length-1){
            this.ord=0;
        }
        //3、改变外观；
        this.changeUI(outord,this.ord);
    },this.timespace);
    };


    //功能：给定出的序号和进的序号，完成两张图片的淡入淡出效果
SlideShow.prototype.changeUI=function(outord,inord){
        let currOpacity = 1;
        let incOpacity = -0.1;

        let imgs = this.boxDom.children; //document.getElementsByTagName("img");

        let myTimer = setInterval(function(){
            //1、改变数据
            currOpacity=currOpacity+incOpacity;//0.1
            //2、数据合法性的判断（边界）
            if(currOpacity<=0){  //
                window.clearInterval(myTimer);
            }
            //3、改变外观
            imgs[outord].style.opacity = currOpacity;
            imgs[inord].style.opacity = 1-currOpacity;
        },200);

        //2)、改变豆豆的背景颜色。
        let lis = this.boxDom.lastElementChild.children;
        //把所有的按钮变成橙色（初始颜色）
        for(let i=0;i