一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 20:55:12

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧:不出意外的話，這應該是這個系列的最后一部分了。第三部分的效果已經基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續博文吧。其實帶背景半透明的備注的輪播效果也是網上一抓一大把，163,qq，taobao等等，仔細找找應該

推薦度：

點擊下載本文 文檔為doc格式

導讀一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧:不出意外的話，這應該是這個系列的最后一部分了。第三部分的效果已經基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續博文吧。其實帶背景半透明的備注的輪播效果也是網上一抓一大把，163,qq，taobao等等，仔細找找應該

不出意外的話，這應該是這個系列的最后一部分了。
　　第三部分的效果已經基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續博文吧。
　　其實帶背景半透明的備注的輪播效果也是網上一抓一大把，163,qq，taobao等等，仔細找找應該都能看到類似的效果。添加文本其實和前一文的添加控制器的方法差不多。無非也就是再append一個元素，在里面顯示文本即可。
代碼如下:
/* -- 顯示備注 --*/
var alt = this.alt = document.createElement('p'); //添加一個p標簽，用于顯示文本
this.img = [];
for(var k=0;kthis.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'; //做文字滑動效果

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

<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<title>step4</title> 
<style type="text/css"></style> 
<script type="text/javascript">來做，語義可能會更好，這里我就不改了 
nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //為它設置樣式 
/* -- 顯示備注 --*/ 
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 
} 
/* ==加入淡入淡出功能 ==*/ 
for(var i=0;i<this.l;i++){ 
this.li[i].o = 100; //為每一個圖片都設置一個透明度變化量 
this.li[i].style.opacity = this.li[i].o/100; //非IE用opacity即可 
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; //IE用濾鏡 
/* == 繪制控制器 == */ 
var nav = document.createElement('a'); //這里我就直接用a標簽來做控制器，考慮語義的話你也可以用li 
nav.className = options.navClass?options.navClass:'fader-nav'; //控制器class，默認為'fader-nav' 
nav.innerHTML = i+1; 
nav.onclick = new Function(this.anchor+'.pos('+i+')'); //綁定onclick事件，直接調用之前寫好的pos()函數 
nav_wp.appendChild(nav); 
} 
wp.appendChild(alt); // 
wp.appendChild(nav_wp); //控制器append到頁面 
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);'; //為這個層添加樣式 
this.pos(this.index); //變換函數 
}, 
auto:function(){ 
this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); 
}, 
move:function(i){//參數i有兩種選擇，1和-1,1代表運行到下一張，-1代表運行到上一張 
var n = this.cur+i; 
var m = i==1?n==this.l?0:n:n<0?this.l-1:n; //下一張或上一張的序號（注意三元選擇符的運用） 
this.pos(m); //變換到上一張或下一張 
}, 
pos:function(i){ 
clearInterval(this.li.a); //清除自動變換計時器 
clearInterval(this.li[i].f); //清除淡入淡出效果計時器 
this.z++; 
this.li[i].style.zIndex = this.z; //每次讓下一張圖片z-index加一 
this.alt.style.zIndex = this.z+1; 
nav_wp.style.zIndex = this.z+2; 
this.cur = i; //綁定當前顯示圖片的正確序號 
this.li.a = false; //做一個標記，下面要用到，表示清除計時器已經完成 
//this.auto(); //自動運行 
if(this.li[i].o>=100){ //在圖片淡入之前先把圖片透明度置為透明 
this.li[i].o = 0; 
this.li[i].style.opacity = 0; 
this.li[i].style.filter = 'alpha(opacity=0)'; 
this.alt.style.height = 0; //做備注層的滑動效果 
} 
this.alt.innerHTML = this.img[i].alt; //植入alt文本 
for(var x=0;x<this.l;x++){ 
nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav'; //綁定當前控制器樣式 
} 
this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20); 
}, 
fade:function(i){ 
if(this.li[i].o>=100){ 
clearInterval(this.li[i].f); //如果透明度變化完畢，清除計時器 
if(!this.li.a){ //確保所有計時器都清除掉之后再開始自動運行。要不然會導致有控制器時點擊過快的話，計時器沒來得及清除就開始下一次變化，功能就亂了 
this.auto(); 
} 
} 
else{ 
this.li[i].o+=5; 
this.li[i].style.opacity = this.li[i].o/100; 
this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')'; 
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動效果 
} 
} 
} 
return {init:init} 
}(); 
// --></ script> 
</head> 
<body> 
 
 
<li><img src="http://files.jb51.net/upload/201010/20101011221558299.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558299.jpg" alt="我是圖片一" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221558112.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558112.jpg" alt="哈哈，圖片二" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221558758.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558758.jpg" alt="這是圖片三" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221558158.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558158.jpg" alt="哈哈，圖片四" /></li> 
<li><img src="http://files.jb51.net/upload/201010/20101011221558834.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221558834.jpg" alt="圖片五來咯" /></li> 
 
 
<script type="text/javascript"></ script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
恩，文章最后，差點忘了說一個很關鍵的點，就是options的配置參數：
在實例化 new Hongru.fader.init()的時候，第二個參數即為配置參數，是個對象，可選配置參數如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當前狀態className
index: //(可選)初始化時從第幾個位置開始播放，默認為0,即第一個元素
}
好了，這一系列到此結束！！源碼大家可以自行更改

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片插件一步一步

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

一步一步教你寫帶圖片注釋的淡入淡出插件（四）_javascript技巧

最新推薦

猜你喜歡

熱門推薦