KV总结

今天没事又重新写了一遍。很多注释是自己犯糊涂后来又终于跨过去的备忘。

// ImgEff.js
function ImgEff(div,time){  //构造函数,需要传入参数div的id和时间
//alert(time);时间传入很正确
    this.time=time;//声明变量，以备使用
    this.arr=[]; //一个数组用来装载所有div，数组的写法别搞错   a=[];
    this._old=null;//一个存储旧div的变量
    this._now=null;//一个存储当前div的变量
    //最基本的只需要初始化这三个变量，如果要传时间，就设个time，如果存div个数就total，如果这是内层的效果，比如外面是淡入，内层是滑动，就多一个外层第几章的判断变量，divNum；
    //开始装载：
    for(var i=0; i<document.getElementById(div).getElementsByTagName("div").length;i++){//上层章节数目，章节容器确实是div
    //alert(document.getElementById(div).getElementsByTagName("div").length) 确实是4
        this.arr.push(document.getElementById(div).getElementsByTagName("div")[i]);//这句是装载的关键，要注意数组的用法 a.push(get...[i])
        //给数组的每个元素设好CSS,并且初始化隐藏掉，在从零开始一张一张淡入
        this.arr[i].style.position="absolute";
        this.arr[i].style.top="0";
        var _id="#"+this.arr[i].id; //注意是_id.id
        $(_id).hide();  //有一点要注意的是，这些都是在构造函数内部完成的。
    }
}
//初始化全部完成，开始做效果：    

ImgEff.prototype.fadeShow = function(id){ //形参上写time，其实什么也不用传入，内部的还是this.time
    //alert(time);//undefined
    //alert(this.time);//正确
    var _id="#"+this.arr[id].id;
    //alert(_id)现在每次淡入的是第三张图，再内层效果没做好之前，确实是这样的，因为图层总是向上堆叠。但如果放入的元素是<img />就不会有这种情况。总是显示第一张
    $(_id).fadeIn(this.time);//fadeIn的部分相对简单，只要把传入的序号对应数组中的序号，取到改序号的id并加上#号即可
    //fadeOut的部分要作一点判断,先有鸡还是先有蛋，要先有已经淡入的图作为旧的图才能淡出，所以判断有没有旧的
    //this._old=this.arr[id];//如果在这里就给旧的赋值，直接出来就淡出了。。。。所以说，必须要在最后给旧的赋值
    if (this._old!=null){//this._old的初始值是null
        var old="#"+this._old.id

        $(old).fadeOut(this.time);
    }
      //存储旧的值，也就是给旧的重新赋值
      this._old=this.arr[id];
}

//被封装的淡入效果里面没有包含事件处理函数。需要在外部执行文件内编写事件的部分。

ImgEff.js

// DivEff.js
function DivEff(div,time){//构造函数,传入要起作用的div的id和时间
    this.arr=[];
    this._now=null;
    this._old=null;
    this.recordOld;
    this.time=time;
    this.isRight=null;//滑动多一个判断左右的布尔型
    this._setNum;//外层章节的id
    this.total=document.getElementById(div).getElementsByTagName("img").length;//为了计数需要total值
    for(var i=0; i<this.total; i++){
        this.arr.push(document.getElementById(div).getElementsByTagName("img")[i])//切记切记PUSH的语法
        this.arr[i].style.postion="absolute";
        if(i!=this._now){//这里当然不能是arr[i]...arr[i]装的是一大串结构！this._now才是当前的id
            //因为是滑动，display:none不存在兼容问题，尽管写
            this.arr[i].style.display="none";
            }
        }
    //在构造函数内部，循环外部要写比淡入多的一句，存储旧的HTML结构
        this.recordOld=this.arr[this._now];
}

DivEff.prototype.show = function(divNum,width,isRight){//滑动的参数比较多，因为要知道是第几章，宽度，方向
    this._now=divNum//把形参传入的章节数赋值给this._now
    var _id="#"+this.arr[divNum].id  //忘了章节数是存储在arr数组里的吗？只要对应 divNum的序号就调出来了
    if(this.recordOld!=null){//如果有旧的
        if(!isRight){//方向判断完，要执行的有两个动作，
         this.arr[divNum].style.left=width+"px";//一个是新的就位准备移入。
         $(_id).animate({left:-width+px},500);//一个是新的移入的动画。
        }
        else{
         this.arr[divNum].style.left=-width+"px";//和上面的反一下负数就可以了
         $(_id).animate({left:width+px},500);
            }
        //前面隐藏了所有的图层，这里要打开当前的
        this.arr[divNum].style.display="block";
        }
    }
//这个封装文件也是不含有事件处理函数的，去外部执行吧！

DivEff.js

// runtime js
//初始化全局变量

var _now=0;//存储当前值总是常用的
var chapFade;//实例化对象
var txtFade;//实例化对象

$(document).ready(function(){  //最好还是来个JQUERY的READY函数确保HTML的载入完毕

//实例化
chapFade = new ImgEff("images_all",1000);//注意参数不带#号
txtFade = new ImgEff("text_all",1000);
showImage(_now);//注意这个初始化的效果一定要在实例化以后执行。所以放到ready之上就报错了。
//内层的四个实例化
myImg_0=new ImagesDiv("img_0",1500);
myImg_1=new ImagesDiv("img_1",1500);
myImg_2=new ImagesDiv("img_2",1500);
myImg_3=new ImagesDiv("img_3",1500);
imgArr=[myImg_0,myImg_1,myImg_2,myImg_3];
});

//实例化的是运动部分，时间部分没有封装的，就在这里执行。
for(var i=0;i<document.getElementById("images_button").getElementsByTagName("div").length;i++){
    var btn=document.getElementById("images_button").getElementsByTagName("div")[i]

    btn.onclick=onClick;
    btn.onmouseover=function(e){
            var e = window.event || e;
            var srcElement = e.srcElement || e.target;
            var id=srcElement.id.split("_")[1];
            if(id!=_now){
            document.getElementById("btn_"+id).style.background="#f00"; //这里已经取代了setColor的作用，那个方法其实已经多余
            }
        }
    btn.onmouseout=function(e){
            var e = window.event || e;
            var srcElement = e.srcElement || e.target;
            var id=srcElement.id.split("_")[1];
            if(id!=_now){
            document.getElementById("btn_"+id).style.background="#fff"; //这里已经取代了setColor的作用，那个方法其实已经多余
            }
        }

}

function onClick(e){
    var e = window.event || e;
    var srcElement = e.srcElement || e.target;
    var id=srcElement.id.split("_")[1];
    //alert(id+"click");//此处的点击id是对的。
    //alert(_now);//问题就出在这里，由于_now是从0开始的，所以根据_now来定click_old就不会对应实际点击的按钮了
    var click_old=_now;//
    document.getElementById("btn_"+click_old).style.background="#fff";//成功将前面点击过的按钮清除
    if(id!=_now){
        showImage(id);//把id传出去，传给封装类
        _now=id;
    }
}

//四选1的时间处理函数很多，这里举例带过。
document.getElementById("arrow_left").onclick=function (){
    if(_now==0){
        myImg_0.btnLClick(true);
    }
    if(_now==1){
        myImg_1.btnLClick(true);
    }
    if(_now==2){
        myImg_2.btnLClick(true);
    }
    if(_now==3){
        myImg_3.btnLClick(true);
    }
};

function showImage(id){//这其实只是为了避免到处都写一大段的执行，并且方便传入参数。。。。之前这里前面多传了一个参数 click_old导致类内部将这个参数当成id接收了，而这个参数不是点击的id而是从0开始的_now的随机数，用来清除旧按钮的。
//alert(id+"?"); 这里与类内部传入的id保持一致
    chapFade.fadeShow(id);//从点击事件处理函数onClick内得到的id
    txtFade.fadeShow(id);

}

执行文件 script.js

<div class="area_gallery">

                           <img id="arrow_left" src="data:images/style/btn_left.png" width="31" height="31" />
                        <img id="arrow_right" src="data:images/style/btn_right.png" width="31" height="31" />

                <div id="images_all">
                    <div id="img_0"><!--下面不能再用DIV，会冲突，但是如果换P标签，又会有层叠从下往上的问题，箭头的定位也会出现CSS的不兼容 -->
                        <img id="img_0_0" src="data:images/style/on_chapter01_img01.jpg" width="660" height="415" />
                        <img id="img_0_1" src="data:images/style/on_chapter01_img02.jpg" width="660" height="415" />
                        <img id="img_0_2" src="data:images/style/on_chapter01_img03.jpg" width="660" height="415" />
                    </div>
                    <div id="img_1">
                          <img id="img_1_0" src="data:images/style/on_chapter02_img01.jpg" width="660" height="415" />
                        <img id="img_1_1" src="data:images/style/on_chapter02_img02.jpg" width="660" height="415" />
                        <img id="img_1_2" src="data:images/style/on_chapter02_img03.jpg" width="660" height="415" />
                    </div>
                    <div id="img_2">
                          <img id="img_2_0" src="data:images/style/on_chapter03_img01.jpg" width="660" height="415" />
                        <img id="img_2_1" src="data:images/style/on_chapter03_img02.jpg" width="660" height="415" />
                        <img id="img_2_2" src="data:images/style/on_chapter03_img03.jpg" width="660" height="415" />
                    </div>
                    <div id="img_3">
                          <img id="img_3_0" src="data:images/style/on_chapter04_img01.jpg" width="660" height="415" />
                        <img id="img_3_1" src="data:images/style/on_chapter04_img02.jpg" width="660" height="415" />
                        <img id="img_3_2" src="data:images/style/on_chapter04_img03.jpg" width="660" height="415" />
                    </div>
                </div>
                  <div id="round_all"></div>
                <div id="text_all">
                  <div id="txt_0">
                    <p class="chap_pic"><div width="120" height="77" style="background:#C69; display:block;"></div>
                    <p class="chap_title">11111111</p><!--叠加隐藏 然后显示第一个-->
                    <p class="chap_txt">chap1txtchap1txtchap1txtchap1txtchap1txtchap1txtchap1txtchap1txtchap1txt</p>
                    </div>
               <div id="txt_1">
                       <p class="chap_pic"><div width="120" height="77" style=" background:#CF9; display:block;"></div>
                    <p class="chap_title">22222222</p><!--叠加隐藏 -->
                    <p class="chap_txt">chap2txtchap2txtchap2txtchap2txtchap2txtchap2txtchap2txtchap2txtchap2txt</p>
                    </div>
                 <div id="txt_2">
                    <p class="chap_pic"><div width="120" height="77" style="background:#39F; display:block;"></div>
                    <p class="chap_title">33333333</p><!--叠加隐藏 -->
                    <p class="chap_txt">chap3txtchap3txtchap3txtchap3txtchap3txtchap3txtchap3txtchap3txtchap3txt</p>
                    </div>
                <div id="txt_3">
                    <p class="chap_pic"><div width="120" height="77" style="background:#63C; display:block;"></div>
                    <p class="chap_title">44444444</p><!--叠加隐藏 -->
                    <p class="chap_txt">chap4txtchap4txtchap4txtchap4txtchap4txtchap4txtchap4txtchap4txtchap4txt</p>
                    </div>
                </div>
                <div id="images_button">
                    <div id="btn_0"></div>
                    <div id="btn_1"></div>
                    <div id="btn_2"></div>
                    <div id="btn_3"></div>
                </div>
            </div>

最后有个翻页显示

<div id="txt_bottom">
<div id="chap_awleft" style="display:none;"></div>
<div id="chap_awrgiht">chapter 2 ></div>
</div>

document.getElementById("chap_awleft").onclick=function (){
    var chap_old=_now;
    _now--;
    if(_now<0){
        _now=3;
    }
    setDivDisplay(chap_old);
};
document.getElementById("chap_awrgiht").onclick=function (){
    var chap_old=_now;
    _now++;
    if(_now>3){
        _now=0;
    }

    setDivDisplay(chap_old);

};
function setDivDisplay(old){
    setColor(old,_now);
    showImage(old,_now);
    document.getElementById("chap_awrgiht").innerHTML="chapter "+(_now+2)+" >";
    document.getElementById("chap_awleft").innerHTML="< chapter "+(_now);
    if(_now==0){
        document.getElementById("chap_awleft").style.display="none";
        document.getElementById("chap_awrgiht").style.display="block";
    }else{
        if(_now==3){
            document.getElementById("chap_awrgiht").style.display="none";
            document.getElementById("chap_awleft").style.display="block";
        }else{
            document.getElementById("chap_awrgiht").style.display="block";
            document.getElementById("chap_awleft").style.display="block";
        }
    }
}

最后执行部分因为我没做完，真正做完的二维的KV执行起来应该是这样，带有自动播放start和停止播放end。

//执行播放
function showImage(old,id){
    //alert(old,id)
    if(old!=-1){
        imgArr[old].end();
    }
    chapFade.fadeShow(id);
    txtFade.fadeShow(id);
    if(id==0){
        //alert(0)
        myImg_0.start(); 执行自动播放的方法
        return;
    }
    if(id==1){
        //alert(1)
        myImg_1.start();
        return;
    }
    if(id==2){
        //alert(2)
        myImg_2.start();
        return;
    }
    if(id==3){
        //alert(3)
        myImg_3.start();
        return;
    }
    /*用SWITCH CASE写也可以
    switch(id){
        case "0":
        alert(0);
        break;
        case "1":
        alert(1);
        break;
        case "2":
        break;
        case "3":
        break;
        default:
        break;
    }*/
}

});

执行