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