原生javascript實現(xiàn)圖片輪播效果代碼
更新時間：2010年09月03日 21:09:42 作者：
前幾天用jquery做了一個JS的圖片輪播效果，現(xiàn)在用原生的javascript代碼實現(xiàn)同樣的功能，當(dāng)練習(xí)用吧，代碼寫得不是很滿意。
看到BlueDream在他博客上寫的javascript仿QQ滑動菜單的效果，代碼實在是優(yōu)雅，相比較差別一下就凸顯了，下次再把他代碼的精髓偷過來，嘿嘿。
【原理簡述】
html和css跟JQuery實現(xiàn)圖片輪播效果里面的一樣，略去。主要是幾個公共函數(shù)，漸顯和漸失，用閉包實現(xiàn)。至于主體邏輯部分，非常一般。
【程序源碼】
貼幾個公共函數(shù)算了，fadeIn,漸顯,fadeOut,漸失
function id(name) {return document.getElementById(name);}
//遍歷函數(shù)
function each(arr, callback) {
if (arr.forEach) {arr.forEach(callback);}
else {
for (var i = 0, len = arr.length; i < len; i++) callback.call(this, arr[i], i, arr);}
}
function fadeIn(elem) {
setOpacity(elem, 0)
for ( var i = 0; i < 20; i++) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeOut(elem) {
for ( var i = 0; i <= 20; i++) {
(function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
// 設(shè)置透明度
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
} else {
elem.style.opacity = level / 100;
}
}
【調(diào)用方法】
//count:圖片數(shù)量，wrapId:包裹圖片的DIV,ulId:按鈕DIV,infoId：信息欄
babyzone.scroll(count,wrapId,ulId,infoId);
babyzone.scroll(4,"banner_list","list","banner_info");
【源碼下載】
/201009/yuanma/scroll_babyzone.rar
【原理簡述】
html和css跟JQuery實現(xiàn)圖片輪播效果里面的一樣，略去。主要是幾個公共函數(shù)，漸顯和漸失，用閉包實現(xiàn)。至于主體邏輯部分，非常一般。
【程序源碼】
貼幾個公共函數(shù)算了，fadeIn,漸顯,fadeOut,漸失
復(fù)制代碼 代碼如下:
function id(name) {return document.getElementById(name);}
//遍歷函數(shù)
function each(arr, callback) {
if (arr.forEach) {arr.forEach(callback);}
else {
for (var i = 0, len = arr.length; i < len; i++) callback.call(this, arr[i], i, arr);}
}
function fadeIn(elem) {
setOpacity(elem, 0)
for ( var i = 0; i < 20; i++) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
function fadeOut(elem) {
for ( var i = 0; i <= 20; i++) {
(function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
})(i);
}
}
// 設(shè)置透明度
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
} else {
elem.style.opacity = level / 100;
}
}
【調(diào)用方法】
//count:圖片數(shù)量，wrapId:包裹圖片的DIV,ulId:按鈕DIV,infoId：信息欄
babyzone.scroll(count,wrapId,ulId,infoId);
babyzone.scroll(4,"banner_list","list","banner_info");
【源碼下載】
/201009/yuanma/scroll_babyzone.rar
相關(guān)文章
如果對javascript了解不是特別深入的話,很容易就會寫出不兼容的代碼(就像我),這時候就得判斷瀏覽器了。比如事件偵聽、一些鼠標(biāo)和鍵盤事件、Range等,一些都會不一樣.下面列出幾種常用的檢測瀏覽器方法，以饗觀眾!2009-09-09
本文將詳細(xì)介紹Canvas + JavaScript 制作圖片粒子效果的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
今天小編就為大家分享一篇關(guān)于js中null與空字符串""的區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
微信小程序如何實現(xiàn)radio單選框單擊打勾和取消
這篇文章主要介紹了微信小程序如何實現(xiàn)radio單選框單擊打勾和取消,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
今天一朋友問我 點擊一按鈕彈出一個DIV，然后要求點擊頁面其它地方隱藏這個DIV2012-07-07
ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實現(xiàn)
這篇文章主要介紹了ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實現(xiàn),需要的朋友可以參考下2015-11-11
Underscore 是一個 JavaScript 工具庫，它提供了一整套函數(shù)式編程的實用功能，但是沒有擴(kuò)展任何 JavaScript 內(nèi)置對象。這篇文章主要介紹了underscore源碼分析相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Angular組件拿不到@Input輸入屬性問題探究解決方法
最近在工作中實現(xiàn)一個feature的時候，碰到一個小問題：Angular組件拿不到@Input輸入屬性的問題，盡管對這些問題都比較了解，但是找問題是需要一個過程的，所以還是把這個問題總結(jié)記錄了下2023-01-01
uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了淺談一種讓小程序支持JSX語法的新思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06