原生JS改變透明度實(shí)現(xiàn)輪播效果
在我看來要想實(shí)現(xiàn)輪播主要是要知道當(dāng)前位于的頁面和即將位于的頁面。這個案例是通過改變圖片的透明度來實(shí)現(xiàn)輪播的效果。
我把涉及的知識點(diǎn)分為兩個方面，分別是HTML+css和JS。
第一部分（html+css）
包含的知識有：positon定位。
最外層是一個div，它包含了所有的元素。這個輪播一共有三張圖片，這三張圖片包含在一個無序列表中。最外層的div還有兩個用來切換上一張圖片和下一張圖 片的子元素。這兩個子元素也是div，切換上一張圖片的div的id屬性為pre，切換下一張圖片的div的id屬性為next。最外層div的 position值為relative。包含圖片的無序列表的position為relative。無序列表中的li元素的positon屬性值為 absolute，這會讓li元素位于文檔流之外，所以如果不顯示的設(shè)置ul的高度，ul高度為零。但是我們不能用css去顯示設(shè)置ul的高度。因?yàn)樾枰?讓這個輪播的高度等于圖片的高度,并且要保證在不同分辨率的計(jì)算機(jī)上圖片的高寬比保持不變。在不同分辨率的計(jì)算機(jī)上圖片顯示出的高度和寬度是不一樣的。所 以我是通過js去設(shè)置ul的高度。因?yàn)閡l的position的屬性值為relative，所以ul的高度會撐開外層div的高度。由于這個案例是通過改 變圖片透明度實(shí)現(xiàn)輪播，所以所有的圖片位于同一個位置，在默認(rèn)情況下最后一張圖片會在最上面，第一個圖片是在最下面，而輪播第一張顯示的圖片圖片應(yīng)該是第 一張，然后是第二張，最后才是第三張，所以要顯示的對每個li設(shè)置z—index屬性。并且z-index屬性值依次遞減。我是用js去設(shè)置每一個li的 z-index屬性值，但其實(shí)并沒有必要這樣做，直接用css屬性就可以了，只不過要寫三個選擇器。
html如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通過改變透明度實(shí)現(xiàn)輪播</title> <link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" > </head> <body> <div class='warp' id='warp'> <ul class='list' id='list'> <li><img src='img/4274ad202b27b671e622388989399d54.jpg' style='opacity: 1'></li> <li><img src='img/299733ddbe89d6b317cc0e84c43999d4.jpg' style='opacity: 1'></li> <li><img src='img/9b7ec36280e638929aa10ce0955df3d3.jpg' style='opacity: 1'></li> </ul> <div class='pre' id='pre'>《</div> <div class='next' id='next'>》</div> </div> <script type="text/javascript" src='index.js'></script> </body> </html>
css代碼如下
*{
padding: 0;
margin: 0;
}
.warp{
position: relative;
width: 100%;
}
.list{
position: relative;
width: 100%;
}
.list li{
position: absolute;
top:0;
left: 0;
width: 100%;
list-style: none;
opacity: 1;
}
li img{
width: 100%;
}
.pre,.next{
position: absolute;
top: 50%;
bottom: 0;
width: 64px;
height: 64px;
z-index: 10;
margin-top: -32px;
text-align: center;
line-height: 64px;
color: #fff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
background-color: transparent;
}
.pre{
left: 20px;
right: auto;
}
.next{
right:20px;
left: auto;
}
.pre:hover,.next:hover{
background-color: rgba(0,0,0,0.7);
}
第二部分（js）涉及的知識有：事件，函數(shù)節(jié)流，設(shè)置定時器，清除定時器
事件由于用的是原生js去實(shí)現(xiàn)功能，所以需要考慮瀏覽器兼容問題。
事件流
有 兩種類型的時間流，分別是事件冒泡流和事件捕獲流，這差不多是完全相反的事件流概念，事件冒泡流叫做事件冒泡，這是IE提出的。以一個click事件為 例，在事件冒泡中事件首先發(fā)生在最具體的那個元素上，也就是我們單擊的那個元素，然后沿著dom樹向上傳播，在傳播的過程中，每一級節(jié)點(diǎn)都會發(fā)生 click事件，直到傳播的document對象。事件捕獲流叫做事件捕獲，這是由Netscape Communicator提出的。同樣以一個 click事件為例，在事件捕獲中事件首先發(fā)生在最不具體的那個節(jié)點(diǎn)上（document對象首先接收到事件），然后沿著dom樹向下傳播，最具體的節(jié)點(diǎn) 最后接收到事件，也就是說，實(shí)際上被點(diǎn)擊的那個元素最后接收click事件。“DOM2級事件”規(guī)定事件流包括三個階段，分別為事件捕獲階段，處于目標(biāo)階 段和事件冒泡階段。在主流瀏覽器中除了IE不支持DOM事件流，其他瀏覽器都支持DOM事件流。所以IE之支持事件冒泡。但是在將來IE應(yīng)該會支持DOM 事件流。那時候在綁定事件的時候就不用考慮瀏覽器兼容問題了。目前為了最大程度的兼容各種瀏覽器，我將事件處理程序添加到事件流的冒泡階段。
事件處理程序
》DOM0級事件處理程序
DOM0 級使用為元素的屬性賦值的方式綁定事件，將事件處理程序?qū)傩缘闹翟O(shè)置為一個函數(shù)即可。程序中的this指當(dāng)前元素。刪除通過DOM0級方法綁定的事件方法 是：將事件處理程序的屬性設(shè)置為null。如果一個元素綁定了事件，在把這個元素移除文檔之前，最好手動的的解除這個元素綁定的事件。這樣可以防止元素已 經(jīng)被移除了但是該元素的事件處理程序的引用還保持在內(nèi)存中。所以的現(xiàn)代瀏覽器都支持DOM0級事件處理程序。但是用DOM0級綁定事件時，每個元素同一個 事件只能添加一個事件處理程序。
》DOM2級事件處理程序
在“DOM2級事件”中指定事件處理程序的方法為：addEventListener（），第一個參是一個事件名，第二個參數(shù)為一個事件處理程序（即一個函 數(shù)，可以是匿名函數(shù)），第三個參數(shù)是一個布爾值。這個布爾值表示在哪一個階段處理事件，當(dāng)為false時表示在冒泡階段處理，當(dāng)為true時表示在捕獲階 段處理。為了兼容性我將這個值設(shè)置為false。解除用“DOM2級事件”綁定的時間處理程序，需要使用removeEventListener（），匿 名的事件處理程序不能被解除。使用“DOM2級事件”綁定事件時，每個元素同一個事件可以添加多個事件處理程序。用“DOM2級事件”綁架的事件處理程 序，this是指當(dāng)前元素。
》IE事件處理程序
在IE中指定事件處理程序的方法是 attachEvent（），第一個參數(shù)是事件處理程序名（即“on”+事件名），第二個參數(shù)是時間處理程序（一個函數(shù)，可以是匿名函數(shù)）。由于IE只支 持事件冒泡所以事件在冒泡階段處理。使用detachEvent（）可以移除用attachEvent（）添加的時間處理程序，但是匿名函數(shù)不能被移除。 使用attachEvent（）綁定事件this指window。。使用attachEvent綁定事件時，每個元素同一個事件可以添加多個事件處理程序。
注：匿名函數(shù)不能被移除的原因是：在js中函數(shù)是一個對象，這個對象被保存在堆里，函數(shù)名是一個指針，指向堆里的對象。對于一個匿名函數(shù)而言沒有指針指向它，所以就訪問不到。
事件對象
在兼容DOM的瀏覽器中，事件對象是作為一個參數(shù)傳遞到事件處理程序中。（即在兼容DOM的瀏覽器，不論是通過DOM0級或DOM2級綁定事件，都會將事件 對象作為參數(shù)傳遞到事件處理程序中），當(dāng)時IE瀏覽器中，如果用DOM0級指定時間處理程序，事件對象是保存在window的event屬性中，如果用 attachEvent（）指定時間處理程序，事件對象是作為一個參數(shù)傳遞到事件處理程序中。在兼容DOM的瀏覽器的事件對象中的值和IE的事件對象中的 值存在差異。但它們都有一個共同的值——type（即：被觸發(fā)的時間的類型）。在兼容DOM的瀏覽器中，事件對象的target屬性表示事件的目標(biāo)，以一 個click事件為例，target屬性指最具體的那個元素。在IE瀏覽器中，事件對象的srcElement屬性表示事件目標(biāo)
在這個案例中，我為最外層的div（它的id為warp）添加了一個click的事件處理程序。通過判斷事件目標(biāo)的id值確定觸發(fā)事件最具體的那個節(jié)點(diǎn)。如果事件目 標(biāo)的id值為pre則切換到上一個圖片，如果事件目標(biāo)的id值為next則切換到下一張圖片。這兒用的是事件代理，事件代理可以減少使用的內(nèi)存。
函數(shù)節(jié)流在這個案例中使用函數(shù)節(jié)流是為了減少當(dāng)連續(xù)觸發(fā)resize事件時瀏覽器的計(jì)算量，因?yàn)槿绻麨g覽器的計(jì)算量太大，瀏覽器會變慢，甚至崩潰。函數(shù)節(jié)流的主要思 路是當(dāng)事件被觸發(fā)時，在事件處理程序中，并不是立即做計(jì)算，而是使用setTimeout或者setInterval在指定的時間后進(jìn)行計(jì)算。
設(shè)置定時器和清除定時器由于要完全講清楚定時器還涉及瀏覽器線程和js的單線程執(zhí)行等問題現(xiàn)在不做講解。主要是我也還沒有完全的搞明白。在這里提一下瀏覽器是多線程的，開啟定時器 是在瀏覽器的定時器線程，js執(zhí)行程序是在瀏覽器的另一個線程。瀏覽器除了這兩個線程還沒有其他的線程。等我也明白了瀏覽器線程之間的聯(lián)系以后我會再寫一 篇文章。
在這個實(shí)例中改變圖片的透明度是通過設(shè)置定時器逐漸變大或者逐漸變小。在增加下一張圖片的不透明度之前，要先將當(dāng)前圖片的不透名都減小到0。
打開頁面自動播放，也是用定時器實(shí)現(xiàn)的，如果要停止播放，就清除定時器
js代碼如下
// 當(dāng)頁面加載完成后將所以需要執(zhí)行的函數(shù)添加到window的load事件上。這兒用的是dom0級事件的綁定，所以不能為window的load事件添加 多個事件處理程序，所以使用的方法是：先判斷window.onload有沒有綁定函數(shù)，如果綁定了，就將新的函數(shù)追加到尾部，如果沒有綁定，就直接添加 給它。用attachEvent（）或者addEventListener（）可以為同一個元素的同一個事件綁定多個事件處理程序，可以不用下面這個方法。
function addLoadEvent(func){
var oldLoad = window.onload;
if(typeof oldLoad != 'function'){
window.onload = func();
}else{
window.onload = function(){
oldLoad();
func();
}
}
}
//設(shè)置class為list的高度,因?yàn)閳D片的position為absolute所以.list元素的高度為零
//如果一個元素的父元素高度為0，那么設(shè)置這個元素的margin: auto 0; 不起作用
function setListHeight(){
var list = document.getElementById('list');
var imgItem = list.getElementsByTagName('img')[0];
var height = imgItem.offsetHeight;
var list = document.getElementById('list');
list.style.height = height + 'px';
}
//設(shè)置li的層級，可以使用css設(shè)置
function setLiIndex(){
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');
var liLen = li.length;
for(var i = 0;i<liLen;i++){
li[i].style.zIndex = liLen-i;
}
}
var index = 1;//index表示當(dāng)前顯示的頁面,index是一個全局變量
var timer;// 定時器標(biāo)識符，如果要清除定時器需要使用它
//事件的跨瀏覽器綁定的對象
var untilEvent = {
addEvent:function(element,type,hander){
if(element.addEventListener){
element.addEventListener(type,hander,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,hander);
}else{
element['on'+type] = hander;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
}
};
function btnClick(){
var warp = document.getElementById('warp');
untilEvent.addEvent(warp,'click',function(event){
var event = untilEvent.getEvent(event);
var target = untilEvent.getTarget(event);
switch(target.id){
case 'pre': if(index == 1){//如果當(dāng)前顯示的圖片已經(jīng)是第一張圖片，當(dāng)點(diǎn)擊切換到"上一張"按鈕，則將即將顯示的圖片設(shè)置為最后一張圖片
index =3;
}else{
--index;
}
anmitate();
break;
case 'next':if(index == 3){//如果當(dāng)前顯示的圖片已經(jīng)是最后圖片，當(dāng)點(diǎn)擊切換到"下一張"按鈕，則將即將顯示的圖片設(shè)置為第一張圖片
index = 1;
}else{
++index;
}
anmitate();
break;
}
});
}
//減小圖片透明度
function decline(cur,inverTime,inverOpacity){
var opacityed = parseFloat(cur.style.opacity);
if(opacityed > 0){
cur.style.opacity = opacityed-inverOpacity;
setTimeout(function(){
decline(cur,inverTime,inverOpacity);
},inverTime);
}
}
//切換圖片的函數(shù)
function anmitate(){
var list = document.getElementById('list');
var imgs = list.getElementsByTagName('img');
var imgsLen = imgs.length;
var whole = 300;//切換一張圖片用的時間
var inverTime = 5;//時間間隔
var inverOpacity = 1/(whole/inverTime);
for(var i = 0;i<imgsLen;i++){
decline(imgs[i],inverTime,inverOpacity);
}
var go = function(){
var opacityed = parseFloat(imgs[index - 1].style.opacity);
if(opacityed < 1){
imgs[index-1].style.opacity = opacityed + inverOpacity;
setTimeout(go,inverTime);
}
};
go();
}
//打開頁面自動切換函數(shù)
function play() {
timer = setTimeout(function () {
if(index == 3){
index = 1;
}else{
++index;
}
anmitate();
play();
//
}, 3000);
}
//停止切換函數(shù),當(dāng)鼠標(biāo)移動到輪播上后取消自動切換，當(dāng)鼠標(biāo)從輪播上移開，又開始自動切換
function stop() {
clearTimeout(timer);
}
//給最外層div添加鼠標(biāo)移除和鼠標(biāo)移入地事件處理程序
function getWarp(){
var warp = document.getElementById('warp');
untilEvent.addEvent(warp,"mouseout",play);
untilEvent.addEvent(warp,"mouseover",stop);
}
//函數(shù)節(jié)流，當(dāng)改變窗口大小時，圖片的大小會變化，所以為了讓控制按鈕位于輪播垂直方向的中間，li的高度該隨圖片的大小做變化
function scrollEvent(){
untilEvent.addEvent(window,"resize",function(){
throttle(setListHeight);
});
}
function throttle(method,context){
clearTimeout(method.Tid);
method.Tid = setTimeout(method,70);
}
addLoadEvent(scrollEvent);
addLoadEvent(setListHeight);
addLoadEvent(setLiIndex);
addLoadEvent(btnClick);
addLoadEvent(play);
addLoadEvent(getWarp);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見的一種展示手段,不僅美觀而且很大氣,這篇文章主要給大家介紹了關(guān)于echarts地圖區(qū)域顯示不同顏色的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細(xì)介紹了js微信分享的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要針對微信jssdk用法進(jìn)行匯總，通過ready接口處理成功驗(yàn)證、通過error接口處理失敗驗(yàn)證等內(nèi)容介紹，感興趣的小伙伴們可以參考一下2016-07-07
js動態(tài)修改input輸入框的type屬性(實(shí)現(xiàn)方法解析)
本文是對js動態(tài)修改input輸入框的type屬性的實(shí)現(xiàn)方法。進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼...2007-06-06
用Javascript檢查Adobe PDF插件是否安裝的實(shí)現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加。2011-03-03
Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼
本文主要介紹了Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼，對于UI給出的設(shè)計(jì)圖，各個氣象網(wǎng)站都有類似的效果，分享給大家2021-10-10
本文主要介紹了Javascript中的 “&” 和 “|” 的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js仿百度音樂全選操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01