原生javascript实现图片轮播效果
#banner { position: relative; width: 478px; height: 286px; border: 1px solid rgba(102, 102, 102, 1); overflow: hidden; font-size: 16px }
#banner_list img { border: 0 }
#banner_bg { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 1); height: 30px; filter: Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer; width: 478px }
#banner_info { position: absolute; bottom: 4px; left: 5px; height: 22px; color: rgba(255, 255, 255, 1); z-index: 1001; cursor: pointer }
#banner_text { position: absolute; width: 120px; z-index: 1002; right: 3px; bottom: 3px }
#banner ul { position: absolute; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; z-index: 1002; margin: 0; padding: 0; bottom: 3px; right: 5px; height: 20px }
#banner ul li { padding: 0 8px; line-height: 18px; float: left; display: block; color: rgba(255, 255, 255, 1); border: 1px solid rgba(229, 234, 255, 1); background-color: rgba(111, 79, 103, 1); cursor: pointer; margin: 0; font-size: 16px }
#banner ul li.on { background-color: rgba(153, 0, 0, 1) }
#banner_list a { position: absolute }
【实例演示】
前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。看到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”);
【源码下载】