原生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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
js里面的变量范围分享
Jul 18 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模板,主要想体现一下思路
2006/12/25 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php 魔术方法详解
2014/11/11 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
JS 对象介绍
2010/01/20 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Python tkinter模版代码实例
2020/02/05 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
《角的度量》教学反思
2016/02/18 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
vue封装数字翻牌器
2022/04/20 Vue.js
GPU服务器的多用户配置方法
2022/07/07 Servers