原生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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
php获取apk包信息的方法
2014/08/15 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
javascript 验证日期的函数
2010/03/18 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python Socket之客户端和服务端握手详解
2017/09/18 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Flask之请求钩子的实现
2018/12/23 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python线程join方法原理解析
2020/02/11 Python
Python post请求实现代码实例
2020/02/28 Python
大一军训感言
2014/01/09 职场文书
初二生物教学反思
2014/02/03 职场文书
委托书样本
2014/04/02 职场文书
大二学习计划书范文
2014/04/27 职场文书
关于环保的标语
2014/06/13 职场文书
文明礼仪标语
2014/06/13 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
总经理检讨书范文
2015/02/16 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书