一步一步教你写带图片注释的淡入淡出插件（四）

网络编程 2024/9/29 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

不出意外的话，这应该是这个系列的最后一部分了。
　　第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢，只能算是加分项。废话不多说了，还是继续博文吧。
　　其实带背景半透明的备注的轮播效果也是网上一抓一大把，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'; //做文字滑动效果

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

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step4</title> <style type="text/css"></style>  </head> <body>  <ul> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20101011221558299.jpg');"><img src="/UploadFiles/2021-04-02/20101011221558299.jpg" alt="一步一步教你写带图片注释的淡入淡出插件（四）" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20101011221558112.jpg');"><img src="/UploadFiles/2021-04-02/20101011221558112.jpg" alt="一步一步教你写带图片注释的淡入淡出插件（四）" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20101011221558758.jpg');"><img src="/UploadFiles/2021-04-02/20101011221558758.jpg" alt="一步一步教你写带图片注释的淡入淡出插件（四）" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20101011221558158.jpg');"><img src="/UploadFiles/2021-04-02/20101011221558158.jpg" alt="一步一步教你写带图片注释的淡入淡出插件（四）" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/20101011221558834.jpg');"><img src="/UploadFiles/2021-04-02/20101011221558834.jpg" alt="一步一步教你写带图片注释的淡入淡出插件（四）" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> </ul>   </body> </html>

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

淡入淡出

标签：

淡入淡出

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“一步一步教你写带图片注释的淡入淡出插件（四）”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月29日

一步一步教你写带图片注释的淡入淡出插件（四）

淡入淡出

javascript forEach通用循环遍历方法

一步一步教你写带图片注释的淡入淡出插件（三）

评论“一步一步教你写带图片注释的淡入淡出插件（四）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接