原生javascript实现图片轮播效果
本文转载自：https://www.cnblogs.com/babyzone2004/archive/2010/09/02/1816090.html 作者：babyzone2004 转载请注明该声明。
代码
【调用方法】
【实例演示】
前几天用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 {
// 遍历函数
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 ;
}
}
}
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");
【源码下载】