首頁 > 開發者 > JavaScript
原生JS實現圖片輪播與淡入效果的簡單一實例，js淡入執行個體
最近對css的興趣提不起來，因為以前對圖片輪播一直耿耿於懷苦於學藝不精，所以，花了點時間熟悉了一下js。然後一條道走到黑，用jquery和js寫了一下輪播和圖片淡入的效果。以後學習的路很長，希望自己在前端的路上越走越遠`(∩_∩)′
從原理來講，網上的教程有很多，簡單來說。
淡入淡出，其實這裡只用到了淡入的效果。每一張淡入的圖片，我們將它的display設定為block，其他為none，所以實際存在並且在文檔流佔位置的只有一張圖片。在設定圖片的display方式之前，將圖片的透明度逐漸增大，就會給人一種淡入的感覺。
其實在js代碼中，還有關鍵的一點，代碼中用到了閉包，因此，才對閉包有了一點點認識。在這裡多說幾句吧：
閉包的官方”的解釋是：閉包是一個擁有許多變數和綁定了這些變數的環境的運算式（通常是一個函數），因而這些變數也是該運算式的一部分。
比較簡單的說法是：
當函數a的內建函式b被函數a外的一個變數引用的時候，就建立了一個閉包。
說的更透徹一些。所謂“閉包”，就是在建構函式體內定義另外的函數作為目標對象的方法函數，而這個對象的方法函數反過來引用外層函數體中的臨時變數。這使得只要目標對象在生存期內始終能保持其方法，就能間接保持原建構函式體當時用到的臨時變數值。
儘管最開始的建構函式調用已經結束，臨時變數的名稱也都消失了，但在目標對象的方法內卻始終能引用到該變數的值，而且該值只能通這種方法來訪問。即使再次調用相同的建構函式，但只會產生新對象和方法，新的臨時變數只是對應新的值，和上次那次調用的是各自獨立的。
下面這個函數就是一個閉包函數。為什麼要用閉包？普通函數不可以嗎？真的是不可以。這裡閉包的作用是保持對flag的引用。如果不用閉包，對於局部變數來說，只要函數執行了一次，也就是flag執行了一次，這個局部變數就會被記憶體回收機制回收清理掉，而我們通過間歇調用中的函數引用flag變數，在第二次執行的時候，flag就會失去它的值，函數體無法執行正確的結果了。在開始接觸前端的時候，覺得閉包可有可無，事實是，這東西真的很重要！
var setVal = function(s, flag) { return function() { pos = Math.abs(parseInt(pic.style[point])); if(flag > 0){ //當前點大於目標點座標，畫面向右移動，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; //當前定位座標整形的絕對值 var time = second, now = 0; //time圖片移動一次時間間隔， now當前圖片的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){ //當前點大於目標點座標，畫面向右移動，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++) //導覽按鈕 { 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當前圖片的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) { //設定透明度 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++) //導覽按鈕 { con[i].onmouseover = (function(i) { return function() { clearTimeout(timeout); //clearInterval(interval); changeTo(i); this.onmouseout=isAuto(); } })(i) } }
jquery相對於js就簡單了很多，這裡就不贅述了。大三的時候上設計模式課，老師告訴我們針對介面而不是針對實現編程，代碼中盡量不要出現常量，提高代碼的複用性，所以寫代碼的時候，把可變的因素都提到了參數中。最後一句，對於js的DOM操作，js原生是王道，多用多練，才能掌握的好，希望以後越走越遠。
以上這篇原生JS實現圖片輪播與淡入效果的簡單一實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
