今天没事又重新写了一遍。很多注释是自己犯糊涂后来又终于跨过去的备忘。
// 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]; } //被封装的淡入效果里面没有包含事件处理函数。需要在外部执行文件内编写事件的部分。
// 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"; } } //这个封装文件也是不含有事件处理函数的，去外部执行吧！
// 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); }
<div class="area_gallery"> <img id="arrow_left" src="images/style/btn_left.png" width="31" height="31" /> <img id="arrow_right" src="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="images/style/on_chapter01_img01.jpg" width="660" height="415" /> <img id="img_0_1" src="images/style/on_chapter01_img02.jpg" width="660" height="415" /> <img id="img_0_2" src="images/style/on_chapter01_img03.jpg" width="660" height="415" /> </div> <div id="img_1"> <img id="img_1_0" src="images/style/on_chapter02_img01.jpg" width="660" height="415" /> <img id="img_1_1" src="images/style/on_chapter02_img02.jpg" width="660" height="415" /> <img id="img_1_2" src="images/style/on_chapter02_img03.jpg" width="660" height="415" /> </div> <div id="img_2"> <img id="img_2_0" src="images/style/on_chapter03_img01.jpg" width="660" height="415" /> <img id="img_2_1" src="images/style/on_chapter03_img02.jpg" width="660" height="415" /> <img id="img_2_2" src="images/style/on_chapter03_img03.jpg" width="660" height="415" /> </div> <div id="img_3"> <img id="img_3_0" src="images/style/on_chapter04_img01.jpg" width="660" height="415" /> <img id="img_3_1" src="images/style/on_chapter04_img02.jpg" width="660" height="415" /> <img id="img_3_2" src="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; }*/ } });