原生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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JS数组的赋值介绍
Mar 10 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
实例解析Array和String方法
2016/12/14 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
初步解析Python下的多进程编程
2015/04/28 Python
简单实现python画圆功能
2018/01/25 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
实习评语
2013/12/16 职场文书
商场主管竞聘书
2014/03/31 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
离职报告范文
2014/11/04 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015元旦感言
2015/12/09 职场文书