ネイティブ JavaScript が画像カルーセル効果を実装する code_javascript スキル

QQ のスライド メニューの効果を模倣するために BlueDream が書いた JavaScript をブログで拝見しましたが、そのコードは実にエレガントで、次回は彼のコードの本質を盗んでみます。
【原理の簡単な説明】
htmlとcssはJQueryで画像カルーセル効果を実現するために使用するものと同じなので省略します。これは主にいくつかのパブリック関数であり、クロージャを使用して実装され、徐々に現れたり消えたりします。メインのロジック部分に関しては、非常に一般的です。
[プログラム ソース コード]
いくつかのパブリック関数、fadeIn、fadeout、fadeOut、fade をポストするだけです

コードをコピー コードは次のとおりです:

function id(name) {return document.getElementById(name);}
//Traversal function
function each( arr , callback) {
if (arr.forEach) {arr.forEach(callback);}
else {
for (var i = 0, len = arr.length; i }
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);
}
}
関数 fadeOut(elem) {
for ( var i = 0; i (function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
} )(i);
}
}
// 透明度を設定します
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" レベル ")";
} else {
elem.style.opacity = レベル / 100>}
}

[呼び出し方法]
//count: 画像の数、wrapId: 画像をラップする DIV、ulId: ボタン DIV、infoId: 情報バー babyzone.scroll(count,wrapId,ulId,infoId );
babyzone.scroll(4,"banner_list","list","banner_info");
【ソースコードダウンロード】

/201009/yuanma/scroll_babyzone.rar