原生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 写类方式之七
Jul 05 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
js数组去重的hash方法
Dec 22 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python获取url的返回信息方法
2018/12/17 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
如何在django中添加日志功能
2020/02/06 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
UNIX特点都有哪些
2016/04/05 面试题
行政文员岗位职责
2013/11/08 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
行政答辩状范文
2015/05/21 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers