最近對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實現圖片輪播與淡入效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。