本文转载自:
https://www.cnblogs.com/babyzone2004/archive/2010/09/02/1816090.html 作者:babyzone2004 转载请注明该声明。
![158e53b2539e2ca8490af33cb57097695.jpg](http://www.itdaan.com/i/158e53b2539e2ca8490af33cb57097695.jpg)
代码
【调用方法】
【实例演示】
前几天用jquery做了一个JS的图片轮播效果,现在用原生的javascript代码实现同样的功能,当练习用吧,代码写得不是很满意。看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿。
【原理简述】
html和css跟JQuery实现图片轮播效果里面的一样,略去。主要是几个公共函数,渐显和渐失,用闭包实现。至于主体逻辑部分,非常一般。
【程序源码】
贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失
![158e53b2539e2ca8490af33cb57097695.jpg](http://www.itdaan.com/i/158e53b2539e2ca8490af33cb57097695.jpg)
![158e53b2539e2ca8490af33cb57097696.jpg](http://www.itdaan.com/i/158e53b2539e2ca8490af33cb57097696.jpg)
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");
【源码下载】