原生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 相关文章推荐
Js动态创建div
Sep 25 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
Vuex简单入门
Apr 19 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
elementUI select组件value值注意事项详解
May 29 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
采用怎样的方法保证数据的完整性
2013/12/02 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
消防安全管理制度
2014/02/01 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
教师党员整改措施
2014/10/24 职场文书
未中标通知书
2015/04/17 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
python字符串常规操作大全
2021/05/02 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Vue h函数的使用详解
2022/02/18 Vue.js
vue 给数组添加新对象并赋值
2022/04/20 Vue.js