快捷導(dǎo)航

原生JS實現(xiàn)圖片輪播與淡入效果的簡單實例

更新時間：2016年08月21日 13:44:02 投稿：jingxian

下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片輪播與淡入效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近對css的興趣提不起來，因為以前對圖片輪播一直耿耿于懷苦于學(xué)藝不精，所以，花了點時間熟悉了一下js。然后一條道走到黑，用jquery和js寫了一下輪播和圖片淡入的效果。以后學(xué)習(xí)的路很長，希望自己在前端的路上越走越遠(yuǎn)`(∩_∩)′

從原理來講，網(wǎng)上的教程有很多，簡單來說。 　　

淡入淡出，其實這里只用到了淡入的效果。每一張淡入的圖片，我們將它的display設(shè)置為block，其他為none，所以實際存在并且在文檔流占位置的只有一張圖片。在設(shè)置圖片的display方式之前，將圖片的透明度逐漸增大，就會給人一種淡入的感覺。

其實在js代碼中，還有關(guān)鍵的一點，代碼中用到了閉包，因此，才對閉包有了一點點認(rèn)識。在這里多說幾句吧：

閉包的官方”的解釋是：閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個函數(shù)），因而這些變量也是該表達(dá)式的一部分。

比較簡單的說法是：

當(dāng)函數(shù)a的內(nèi)部函數(shù)b被函數(shù)a外的一個變量引用的時候，就創(chuàng)建了一個閉包。

說的更透徹一些。所謂“閉包”，就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對象的方法函數(shù)，而這個對象的方法函數(shù)反過來引用外層函數(shù)體中的臨時變量。這使得只要目標(biāo)對象在生存期內(nèi)始終能保持其方法，就能間接保持原構(gòu)造函數(shù)體當(dāng)時用到的臨時變量值。

盡管最開始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束，臨時變量的名稱也都消失了，但在目標(biāo)對象的方法內(nèi)卻始終能引用到該變量的值，而且該值只能通這種方法來訪問。即使再次調(diào)用相同的構(gòu)造函數(shù)，但只會生成新對象和方法，新的臨時變量只是對應(yīng)新的值，和上次那次調(diào)用的是各自獨立的。

下面這個函數(shù)就是一個閉包函數(shù)。為什么要用閉包？普通函數(shù)不可以嗎？真的是不可以。這里閉包的作用是保持對flag的引用。如果不用閉包，對于局部變量來說，只要函數(shù)執(zhí)行了一次，也就是flag執(zhí)行了一次，這個局部變量就會被垃圾回收機(jī)制回收清理掉，而我們通過間歇調(diào)用中的函數(shù)引用flag變量，在第二次執(zhí)行的時候，flag就會失去它的值，函數(shù)體無法執(zhí)行正確的結(jié)果了。在開始接觸前端的時候，覺得閉包可有可無，事實是，這東西真的很重要！

var setVal = function(s, flag)
    {
      return function()
      {
        pos = Math.abs(parseInt(pic.style[point]));
        if(flag > 0){   //當(dāng)前點大于目標(biāo)點坐標(biāo)，畫面向右移動，left值減小
          pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(flag < 0) {
          pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(pos == (sSingleSize * s))
        {
          now = s;
          clearInterval(interval);
        }
      }
    };

下面是代碼：

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>picsGlide</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script src="js/index.js"></script>
</head>
<body onLoad="init()">
<div id = "picBox">
  <ul class = "show_pic" style = "left: 0">
    <li class = "on"><a href="#"><img src="imgs/ccc.jpg" alt="" title="" /></a></li>
    <li><img src="imgs/aaa.jpg" alt="" title="" /></li>
    <li><img src="imgs/bbb.jpg" alt="" title="" /></li>
    <li><img src="imgs/ccc.jpg" alt="" title="" /></li>
    <li><img src="imgs/ccc.jpg" alt="" title="" /></li>
  </ul>
  <div class = "bg"></div> 
  <ul class = "show_des">
    <li class="on">puss in boots1</li> 
    <li>puss in boots2</li> 
    <li>puss in boots3</li> 
    <li>puss in boots4</li> 
    <li>puss in boots5</li> 
  </ul> 
  <ul class = "icon_num">
    <li class = "on" >1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

</body>
</html>

css

body {font-size: 12px; 
}
ul, li {
  padding: 0;
  margin: 0;
  list-style: none; 
}
#picBox {
  width: 610px; 
  height: 205px; 
  margin: 50px auto; 
  overflow: hidden; 
  position: relative;
  font-size: 0;
}
/*輪播圖片*/
#picBox .show_pic {
  width: 3050px;
  position: absolute;
}
#picBox .show_pic li {
  float: left; 
  width: 610px; 
  height: 205px;
  display: none;
  /*display: none;
*/
}
#picBox .show_pic li.on { 
  display: block;
}
#picBox .show_pic li img { 
  display: block;
  width: 610px;
  height: 205px;
}
#picBox .icon_num {
  position: absolute;
  bottom: 12px; 
  right: 10px;
  z-index: 10;

}
#picBox .icon_num li { 
  float: left; 
  /*background: url(/uploadfile/200912/28/FA15567738.gif) no-repeat -15px 0;
  */
  width: 16px; 
  height: 16px;
  font-size: 16px; 
  color: #39F; 
  text-align: center; 
  cursor: pointer; 
  margin-right: 5px;
}

#picBox .icon_num li.on {
  background: #000;
  opacity: 0.5; 
}
/*背景*/
.bg {
  z-index: 1;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 610px;
  background: #000;
  opacity: 0.6;
  filter: alpha(opacity = 60);
}
#picBox .show_des {
  width: 300px;
  height: 18px;
  position: absolute;
  bottom: 11px;
  left: 15px;
  color: #fff;
  z-index: 10;
}
#picBox .show_des li {
  display: none;
  line-height: 18px;
  font-size: 18px;
}
#picBox .show_des li.on { 
  display: block;
}

js

function cleanWhitespace(oEelement)
  {
    for(var i=0;i<oEelement.childNodes.length;i++){
      var node=oEelement.childNodes[i];
      if(node.nodeType==3 && !/\S/.test(node.nodeValue))
      {
        node.parentNode.removeChild(node);
      }
    }
  }
  //輪播代碼
  this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point)
  {
    var interval,timeout;    //兩個定時器
    var pos;           //當(dāng)前定位坐標(biāo)整形的絕對值
    var time = second, now = 0;    //time圖片移動一次時間間隔， now當(dāng)前圖片的index值
    var speed = fSpeed      //移動速度
    var delay = second * 1000;  //每次切換圖片的時間間隔

    var picBox = document.getElementById(oBox);
    cleanWhitespace(picBox);
    var pic = picBox.childNodes[0]; //圖片列表
    var des = picBox.childNodes[2].getElementsByTagName("li"); //圖片列表
    var con = picBox.childNodes[3].getElementsByTagName("li");
    var sum = con.length;
    var setVal = function(s, flag)
    {
      return function()
      {
        pos = Math.abs(parseInt(pic.style[point]));
        if(flag > 0){   //當(dāng)前點大于目標(biāo)點坐標(biāo)，畫面向右移動，left值減小
          pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(flag < 0) {
          pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(pos == (sSingleSize * s))
        {
          now = s;
          clearInterval(interval);
        }
      }
    };
    var changeTo = function(num) {
      for(var i=0; i<sum; i++)
      {
        con[i].className = "";
        des[i].className = ""; 
      };
      con[num].className = "on";
      des[num].className = "on";
      var flag = Math.abs(parseInt(pic.style[point]))-sSingleSize * num ;
      interval = setInterval(setVal(num, flag), time);
      //bkg.hide().fadeIn();
    } 
    function autoGlide()
    {
      clearTimeout(interval);
      now = (now == (parseInt(sum)-1) )? 0: (now + 1);
      changeTo(now);
      timeout = setTimeout(autoGlide,delay);
    }
    function isAuto() {
      if(auto) {
        timeout = setTimeout(autoGlide,delay);
      };
    }
    isAuto();  //開始自動輪播
    for(var i=0; i<sum; i++)  //導(dǎo)航按鈕
    {
      con[i].onmouseover = (function(i)
      {
        return function()
        {
          clearTimeout(timeout);
          clearInterval(interval);
          changeTo(i);
          this.onmouseout=isAuto();
        }
      })(i)
    }
  }
  //淡入淡出
  this.layerFader=function(auto, oBox, second, count, speed)
  {
    var interval,timeout;    //兩個定時器
    var now = 0;    //time圖片移動一次時間間隔， now當(dāng)前圖片的index值
    var delay = second * 1000;  //每次切換圖片的時間間隔

    var picBox = document.getElementById(oBox);
    cleanWhitespace(picBox);
    var pic = picBox.childNodes[0].getElementsByTagName("li");
    var des = picBox.childNodes[2].getElementsByTagName("li"); 
    var con = picBox.childNodes[3].getElementsByTagName("li");
    var sum = con.length;

    function fadeIn(elem){  
      setOpacity(elem,0); //初始全透明
      for(var i = 0;i<=count;i++){ //透明度改變 20 * 5 = 100   
        (function(i){    
           var level = i * 5; //透明度每次變化值   
           setTimeout(function(){     
             setOpacity(elem, level)    
           },i*speed); 
         })(i);   
      } 
    }  
    function setOpacity(elem, level) {  //設(shè)置透明度 
      if (elem.filters) {
        elem.style.filter = "alpha(opacity=" + level + ")";
      } else {
        elem.style.opacity = level / 100;
      }
    }
    var changeTo = function(num) {
      for(var i=0; i<sum; i++)
      {
        con[i].className = "";
        des[i].className = ""; 
        pic[i].className = "";
      };
      fadeIn(pic[num]);
      con[num].className = "on";
      des[num].className = "on";
      pic[num].className = "on";
      //bkg.hide().fadeIn();
    } 
    function autoGlide()
    {
      clearTimeout(interval);
      now = (now == (parseInt(sum)-1) )? 0: (now + 1);
      changeTo(now);
      timeout = setTimeout(autoGlide,delay);
    }
    function isAuto() {
      if(auto) {
        timeout = setTimeout(autoGlide,delay);
      };
    }
    isAuto();  //開始自動輪播
    for(var i=0; i<sum; i++)  //導(dǎo)航按鈕
    {
      con[i].onmouseover = (function(i)
      {
        return function()
        {
          clearTimeout(timeout);
          //clearInterval(interval);
          changeTo(i);
          this.onmouseout=isAuto();
        }
      })(i)
    }
  }

jquery相對于js就簡單了很多，這里就不贅述了。大三的時候上設(shè)計模式課，老師告訴我們針對接口而不是針對實現(xiàn)編程，代碼中盡量不要出現(xiàn)常量，提高代碼的復(fù)用性，所以寫代碼的時候，把可變的因素都提到了參數(shù)中。最后一句，對于js的DOM操作，js原生是王道，多用多練，才能掌握的好，希望以后越走越遠(yuǎn)。

以上這篇原生JS實現(xiàn)圖片輪播與淡入效果的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: