真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

原生JS如何改變透明度實(shí)現(xiàn)輪播效果

這篇文章給大家分享的是有關(guān)原生JS如何改變透明度實(shí)現(xiàn)輪播效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

10年積累的網(wǎng)站設(shè)計(jì)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有海棠免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

第一部分（html+css）

包含的知識有：positon定位。

最外層是一個(gè)div，它包含了所有的元素。這個(gè)輪播一共有三張圖片，這三張圖片包含在一個(gè)無序列表中。最外層的div還有兩個(gè)用來切換上一張圖片和下一張圖 片的子元素。這兩個(gè)子元素也是div，切換上一張圖片的div的id屬性為pre，切換下一張圖片的div的id屬性為next。最外層div的 position值為relative。包含圖片的無序列表的position為relative。無序列表中的li元素的positon屬性值為 absolute，這會讓li元素位于文檔流之外，所以如果不顯示的設(shè)置ul的高度，ul高度為零。但是我們不能用css去顯示設(shè)置ul的高度。因?yàn)樾枰?讓這個(gè)輪播的高度等于圖片的高度,并且要保證在不同分辨率的計(jì)算機(jī)上圖片的高寬比保持不變。在不同分辨率的計(jì)算機(jī)上圖片顯示出的高度和寬度是不一樣的。所 以我是通過js去設(shè)置ul的高度。因?yàn)閡l的position的屬性值為relative，所以ul的高度會撐開外層div的高度。由于這個(gè)案例是通過改 變圖片透明度實(shí)現(xiàn)輪播，所以所有的圖片位于同一個(gè)位置，在默認(rèn)情況下最后一張圖片會在最上面，第一個(gè)圖片是在最下面，而輪播第一張顯示的圖片圖片應(yīng)該是第 一張，然后是第二張，最后才是第三張，所以要顯示的對每個(gè)li設(shè)置z—index屬性。并且z-index屬性值依次遞減。我是用js去設(shè)置每一個(gè)li的 z-index屬性值，但其實(shí)并沒有必要這樣做，直接用css屬性就可以了，只不過要寫三個(gè)選擇器。

html如下：




 
 通過改變透明度實(shí)現(xiàn)輪播
 


 
 
  
    • 
  
    • 
  
    • 
 
 《
     》
     
     

    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è)置定時(shí)器，清除定時(shí)器
    事件由于用的是原生js去實(shí)現(xiàn)功能，所以需要考慮瀏覽器兼容問題。

    事件流

    有 兩種類型的時(shí)間流，分別是事件冒泡流和事件捕獲流，這差不多是完全相反的事件流概念，事件冒泡流叫做事件冒泡，這是IE提出的。以一個(gè)click事件為 例，在事件冒泡中事件首先發(fā)生在最具體的那個(gè)元素上，也就是我們單擊的那個(gè)元素，然后沿著dom樹向上傳播，在傳播的過程中，每一級節(jié)點(diǎn)都會發(fā)生 click事件，直到傳播的document對象。事件捕獲流叫做事件捕獲，這是由Netscape Communicator提出的。同樣以一個(gè) click事件為例，在事件捕獲中事件首先發(fā)生在最不具體的那個(gè)節(jié)點(diǎn)上（document對象首先接收到事件），然后沿著dom樹向下傳播，最具體的節(jié)點(diǎn) 最后接收到事件，也就是說，實(shí)際上被點(diǎn)擊的那個(gè)元素最后接收click事件?！癉OM2級事件”規(guī)定事件流包括三個(gè)階段，分別為事件捕獲階段，處于目標(biāo)階 段和事件冒泡階段。在主流瀏覽器中除了IE不支持DOM事件流，其他瀏覽器都支持DOM事件流。所以IE之支持事件冒泡。但是在將來IE應(yīng)該會支持DOM 事件流。那時(shí)候在綁定事件的時(shí)候就不用考慮瀏覽器兼容問題了。目前為了最大程度的兼容各種瀏覽器，我將事件處理程序添加到事件流的冒泡階段。

    事件處理程序

    》DOM0級事件處理程序

    DOM0 級使用為元素的屬性賦值的方式綁定事件，將事件處理程序?qū)傩缘闹翟O(shè)置為一個(gè)函數(shù)即可。程序中的this指當(dāng)前元素。刪除通過DOM0級方法綁定的事件方法 是：將事件處理程序的屬性設(shè)置為null。如果一個(gè)元素綁定了事件，在把這個(gè)元素移除文檔之前，最好手動的的解除這個(gè)元素綁定的事件。這樣可以防止元素已 經(jīng)被移除了但是該元素的事件處理程序的引用還保持在內(nèi)存中。所以的現(xiàn)代瀏覽器都支持DOM0級事件處理程序。但是用DOM0級綁定事件時(shí)，每個(gè)元素同一個(gè) 事件只能添加一個(gè)事件處理程序。

    》DOM2級事件處理程序

    在“DOM2級事件”中指定事件處理程序的方法為：addEventListener（），第一個(gè)參是一個(gè)事件名，第二個(gè)參數(shù)為一個(gè)事件處理程序（即一個(gè)函 數(shù)，可以是匿名函數(shù)），第三個(gè)參數(shù)是一個(gè)布爾值。這個(gè)布爾值表示在哪一個(gè)階段處理事件，當(dāng)為false時(shí)表示在冒泡階段處理，當(dāng)為true時(shí)表示在捕獲階 段處理。為了兼容性我將這個(gè)值設(shè)置為false。解除用“DOM2級事件”綁定的時(shí)間處理程序，需要使用removeEventListener（），匿 名的事件處理程序不能被解除。使用“DOM2級事件”綁定事件時(shí)，每個(gè)元素同一個(gè)事件可以添加多個(gè)事件處理程序。用“DOM2級事件”綁架的事件處理程 序，this是指當(dāng)前元素。

    》IE事件處理程序

    在IE中指定事件處理程序的方法是 attachEvent（），第一個(gè)參數(shù)是事件處理程序名（即“on”+事件名），第二個(gè)參數(shù)是時(shí)間處理程序（一個(gè)函數(shù)，可以是匿名函數(shù)）。由于IE只支 持事件冒泡所以事件在冒泡階段處理。使用detachEvent（）可以移除用attachEvent（）添加的時(shí)間處理程序，但是匿名函數(shù)不能被移除。 使用attachEvent（）綁定事件this指window。。使用attachEvent綁定事件時(shí)，每個(gè)元素同一個(gè)事件可以添加多個(gè)事件處理程序。

    注：匿名函數(shù)不能被移除的原因是：在js中函數(shù)是一個(gè)對象，這個(gè)對象被保存在堆里，函數(shù)名是一個(gè)指針，指向堆里的對象。對于一個(gè)匿名函數(shù)而言沒有指針指向它，所以就訪問不到。

    事件對象

    在兼容DOM的瀏覽器中，事件對象是作為一個(gè)參數(shù)傳遞到事件處理程序中。（即在兼容DOM的瀏覽器，不論是通過DOM0級或DOM2級綁定事件，都會將事件 對象作為參數(shù)傳遞到事件處理程序中），當(dāng)時(shí)IE瀏覽器中，如果用DOM0級指定時(shí)間處理程序，事件對象是保存在window的event屬性中，如果用 attachEvent（）指定時(shí)間處理程序，事件對象是作為一個(gè)參數(shù)傳遞到事件處理程序中。在兼容DOM的瀏覽器的事件對象中的值和IE的事件對象中的 值存在差異。但它們都有一個(gè)共同的值——type（即：被觸發(fā)的時(shí)間的類型）。在兼容DOM的瀏覽器中，事件對象的target屬性表示事件的目標(biāo)，以一 個(gè)click事件為例，target屬性指最具體的那個(gè)元素。在IE瀏覽器中，事件對象的srcElement屬性表示事件目標(biāo)

    在這個(gè)案例中，我為最外層的div（它的id為warp）添加了一個(gè)click的事件處理程序。通過判斷事件目標(biāo)的id值確定觸發(fā)事件最具體的那個(gè)節(jié)點(diǎn)。如果事件目 標(biāo)的id值為pre則切換到上一個(gè)圖片，如果事件目標(biāo)的id值為next則切換到下一張圖片。這兒用的是事件代理，事件代理可以減少使用的內(nèi)存。

    函數(shù)節(jié)流在這個(gè)案例中使用函數(shù)節(jié)流是為了減少當(dāng)連續(xù)觸發(fā)resize事件時(shí)瀏覽器的計(jì)算量，因?yàn)槿绻麨g覽器的計(jì)算量太大，瀏覽器會變慢，甚至崩潰。函數(shù)節(jié)流的主要思 路是當(dāng)事件被觸發(fā)時(shí)，在事件處理程序中，并不是立即做計(jì)算，而是使用setTimeout或者setInterval在指定的時(shí)間后進(jìn)行計(jì)算。

    設(shè)置定時(shí)器和清除定時(shí)器由于要完全講清楚定時(shí)器還涉及瀏覽器線程和js的單線程執(zhí)行等問題現(xiàn)在不做講解。主要是我也還沒有完全的搞明白。在這里提一下瀏覽器是多線程的，開啟定時(shí)器 是在瀏覽器的定時(shí)器線程，js執(zhí)行程序是在瀏覽器的另一個(gè)線程。瀏覽器除了這兩個(gè)線程還沒有其他的線程。等我也明白了瀏覽器線程之間的聯(lián)系以后我會再寫一 篇文章。

    在這個(gè)實(shí)例中改變圖片的透明度是通過設(shè)置定時(shí)器逐漸變大或者逐漸變小。在增加下一張圖片的不透明度之前，要先將當(dāng)前圖片的不透名都減小到0。

    打開頁面自動播放，也是用定時(shí)器實(shí)現(xiàn)的，如果要停止播放，就清除定時(shí)器

    js代碼如下 

    // 當(dāng)頁面加載完成后將所以需要執(zhí)行的函數(shù)添加到window的load事件上。這兒用的是dom0級事件的綁定，所以不能為window的load事件添加 多個(gè)事件處理程序，所以使用的方法是：先判斷window.onload有沒有綁定函數(shù)，如果綁定了，就將新的函數(shù)追加到尾部，如果沒有綁定，就直接添加 給它。用attachEvent（）或者addEventListener（）可以為同一個(gè)元素的同一個(gè)事件綁定多個(gè)事件處理程序，可以不用下面這個(gè)方法。

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元素的高度為零
//如果一個(gè)元素的父元素高度為0，那么設(shè)置這個(gè)元素的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 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;//切換一張圖片用的時(shí)間
 var inverTime = 5;//時(shí)間間隔
 var inverOpacity = 1/(whole/inverTime);
 for(var i = 0;i
    感謝各位的閱讀！關(guān)于“原生JS如何改變透明度實(shí)現(xiàn)輪播效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
                
            
                        
    
            網(wǎng)站欄目：原生JS如何改變透明度實(shí)現(xiàn)輪播效果            
    
            文章源于：http://weahome.cn/article/pshepj.html
        
    





    
    
    
        
    
            
                
                
    在線咨詢
    
                
        
    
    
    
    
    
        
    微信咨詢
    
        
    
    
    
    
    
        
    電話咨詢
    
        
    
            
    028-86922220（工作日）
    
            
    18980820575（7×24）
    
        
    
    
    
    
    
        
    
            
                
    提交需求
    
                
        
    
    
    
    
    
        
    
            
                
    返回頂部