本文介绍使用原生JavaScript实现图片轮播效果的方法。文章提供了包含fadeIn、fadeOut及setOpacity等公共函数的完整代码，详细解析了通过闭包和定时器控制元素透明度的逻辑，并给出了具体的调用示例和源码下载链接。
实现背景与概述
参考BlueDream博客中关于JavaScript仿QQ滑动菜单的实现，其代码风格优雅，相比之下差异明显。后续将借鉴其代码精髓。
【原理简述】
HTML和CSS结构与使用JQuery实现图片轮播效果的示例保持一致，此处省略。核心在于几个公共函数，包括渐显和渐隐效果，这些功能通过闭包实现。主体逻辑部分相对简单。
【程序源码】
以下列出几个公共函数，包括fadeIn（渐显）和fadeOut（渐隐）。
核心代码实现
代码如下:
function id(name) {return document.getElementById(name;}
//遍历函数
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);
}
}
// 设置透明度
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
} else {
elem.style.opacity = level / 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