发布于 2017-07-12 21:57:06 | 67 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

---

第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。
不出意外的话，这应该是这个系列的最后一部分了。
　　第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。
　　其实带背景半透明的备注的轮播效果也是网上一抓一大把，163,qq，taobao等等，仔细找找应该都能看到类似的效果。添加文本其实和前一文的添加控制器的方法差不多。无非也就是再append一个元素，在里面显示文本即可。

 
/* -- 显示备注 --*/ 
var alt = this.alt = document.createElement('p'); //添加一个p标签，用于显示文本 
this.img = []; 
for(var k=0;k<this.l;k++){ 
this.img.push(H$$('img',this.li[k])[0]); //提取轮播模块里的图片，目的是取alt 
} 
.
.
. 
wp.appendChild(alt); // 
this.textH = nav_wp.offsetHeight; 
alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //为这个层添加样式 

上面是init() 函数里添加的两段代码。都很易懂。就不细讲了。另外。同样要在变换函数里改变z-index值，让控制器处于最高，文本层次之，同时再把alt文本写入到这个文本层里面，如果需要滑动效果的话，在pos()里面把高度清0，在fade()里做高度变换即可（同样也可以用top或left来做）；故pos()里改动代码如下：

 
this.alt.style.zIndex = this.z+1; 
nav_wp.style.zIndex = this.z+2; 
. 
this.alt.style.height = 0; //做备注层的滑动效果 
. 
this.alt.innerHTML = this.img[i].alt; //植入alt文本 

如果文本层有高度变化效果的话，fade()里面加一句文本层的高度变化即可：

 
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果 

恩，这样就差不多了。再看看最后的效果吧。

恩，文章最后，差点忘了说一个很关键的点，就是options的配置参数：
在实例化 new Hongru.fader.init()的时候，第二个参数即为配置参数，是个对象，可选配置参数如下
{
id: //(必选)，轮播列表父元素id
auto: //(可选)自动播放时间间隔秒数
navClass: //(可选) 控制器className
curNavClass: //(可选) 控制器当前状态className
index: //(可选)初始化时从第几个位置开始播放，默认为0,即第一个元素
}
好了，这一系列到此结束！！源码大家可以自行更改