原生javascript实现图片轮播效果代码


Posted in Javascript onSeptember 03, 2010

看到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
Javascript 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
心扬JS分页函数代码
Sep 10 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 #Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 #Javascript
Dojo 学习要点
Sep 03 #Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 #Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
Jquery中dialog属性小记
Sep 03 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
php 无限分类的树类代码
2009/12/03 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
JS 统计时间
2021/03/09 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
高一家长会邀请函
2014/01/12 职场文书
大学班级文化建设方案
2014/05/06 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
回复函格式及范文
2015/07/14 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
高三语文教学反思
2016/02/16 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
Nginx内网单机反向代理的实现
2021/11/07 Servers
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript