原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例
最近對(duì)css的興趣提不起來(lái)，因?yàn)橐郧皩?duì)圖片輪播一直耿耿于懷苦于學(xué)藝不精，所以，花了點(diǎn)時(shí)間熟悉了一下js。然后一條道走到黑，用jquery和js寫了一下輪播和圖片淡入的效果。以后學(xué)習(xí)的路很長(zhǎng)，希望自己在前端的路上越走越遠(yuǎn)`(∩_∩)′
從原理來(lái)講，網(wǎng)上的教程有很多，簡(jiǎn)單來(lái)說(shuō)。
淡入淡出，其實(shí)這里只用到了淡入的效果。每一張淡入的圖片，我們將它的display設(shè)置為block，其他為none，所以實(shí)際存在并且在文檔流占位置的只有一張圖片。在設(shè)置圖片的display方式之前，將圖片的透明度逐漸增大，就會(huì)給人一種淡入的感覺(jué)。
其實(shí)在js代碼中，還有關(guān)鍵的一點(diǎn)，代碼中用到了閉包，因此，才對(duì)閉包有了一點(diǎn)點(diǎn)認(rèn)識(shí)。在這里多說(shuō)幾句吧：
閉包的官方”的解釋是：閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。
比較簡(jiǎn)單的說(shuō)法是：
當(dāng)函數(shù)a的內(nèi)部函數(shù)b被函數(shù)a外的一個(gè)變量引用的時(shí)候，就創(chuàng)建了一個(gè)閉包。
說(shuō)的更透徹一些。所謂“閉包”，就是在構(gòu)造函數(shù)體內(nèi)定義另外的函數(shù)作為目標(biāo)對(duì)象的方法函數(shù)，而這個(gè)對(duì)象的方法函數(shù)反過(guò)來(lái)引用外層函數(shù)體中的臨時(shí)變量。這使得只要目標(biāo)對(duì)象在生存期內(nèi)始終能保持其方法，就能間接保持原構(gòu)造函數(shù)體當(dāng)時(shí)用到的臨時(shí)變量值。
盡管最開(kāi)始的構(gòu)造函數(shù)調(diào)用已經(jīng)結(jié)束，臨時(shí)變量的名稱也都消失了，但在目標(biāo)對(duì)象的方法內(nèi)卻始終能引用到該變量的值，而且該值只能通這種方法來(lái)訪問(wèn)。即使再次調(diào)用相同的構(gòu)造函數(shù)，但只會(huì)生成新對(duì)象和方法，新的臨時(shí)變量只是對(duì)應(yīng)新的值，和上次那次調(diào)用的是各自獨(dú)立的。
下面這個(gè)函數(shù)就是一個(gè)閉包函數(shù)。為什么要用閉包？普通函數(shù)不可以嗎？真的是不可以。這里閉包的作用是保持對(duì)flag的引用。如果不用閉包，對(duì)于局部變量來(lái)說(shuō)，只要函數(shù)執(zhí)行了一次，也就是flag執(zhí)行了一次，這個(gè)局部變量就會(huì)被垃圾回收機(jī)制回收清理掉，而我們通過(guò)間歇調(diào)用中的函數(shù)引用flag變量，在第二次執(zhí)行的時(shí)候，flag就會(huì)失去它的值，函數(shù)體無(wú)法執(zhí)行正確的結(jié)果了。在開(kāi)始接觸前端的時(shí)候，覺(jué)得閉包可有可無(wú)，事實(shí)是，這東西真的很重要！
var setVal = function(s, flag)
{
return function()
{
pos = Math.abs(parseInt(pic.style[point]));
if(flag > 0){ //當(dāng)前點(diǎn)大于目標(biāo)點(diǎn)坐標(biāo)，畫面向右移動(dòng)，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; //兩個(gè)定時(shí)器
var pos; //當(dāng)前定位坐標(biāo)整形的絕對(duì)值
var time = second, now = 0; //time圖片移動(dòng)一次時(shí)間間隔， now當(dāng)前圖片的index值
var speed = fSpeed //移動(dòng)速度
var delay = second * 1000; //每次切換圖片的時(shí)間間隔
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)前點(diǎn)大于目標(biāo)點(diǎn)坐標(biāo)，畫面向右移動(dòng)，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(); //開(kāi)始自動(dòng)輪播
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; //兩個(gè)定時(shí)器
var now = 0; //time圖片移動(dòng)一次時(shí)間間隔， now當(dāng)前圖片的index值
var delay = second * 1000; //每次切換圖片的時(shí)間間隔
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(); //開(kāi)始自動(dòng)輪播
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相對(duì)于js就簡(jiǎn)單了很多，這里就不贅述了。大三的時(shí)候上設(shè)計(jì)模式課，老師告訴我們針對(duì)接口而不是針對(duì)實(shí)現(xiàn)編程，代碼中盡量不要出現(xiàn)常量，提高代碼的復(fù)用性，所以寫代碼的時(shí)候，把可變的因素都提到了參數(shù)中。最后一句，對(duì)于js的DOM操作，js原生是王道，多用多練，才能掌握的好，希望以后越走越遠(yuǎn)。
以上這篇原生JS實(shí)現(xiàn)圖片輪播與淡入效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 全角轉(zhuǎn)半角部分 ，需要的朋友可以參考下。2009-10-10
很好用的js日歷算法詳細(xì)代碼，包括公歷與農(nóng)歷的一些所需要的功能實(shí)現(xiàn)，需要的朋友可以參考一下2013-03-03
js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了js控件Kindeditor實(shí)現(xiàn)圖片自動(dòng)上傳功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
詳解微信小程序開(kāi)發(fā)用戶授權(quán)登陸
這篇文章主要介紹了微信小程序開(kāi)發(fā)用戶授權(quán)登陸，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript實(shí)現(xiàn)全選和全不選操作
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)全選和全不選操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),有時(shí)候需要獲取el-tree每個(gè)節(jié)點(diǎn)的點(diǎn)擊狀態(tài),可以通過(guò)以下方式,其中isCheck類型為布爾值,本文結(jié)合實(shí)例代碼介紹ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),感興趣的朋友一起看看吧2023-12-12
在javascript中，可以為某個(gè)元素指定事件，指定的方式有以下三種使用onclick屬性，使用addEvenListener()方法2014-08-08
Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等2013-12-12
el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01