原生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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
spyder常用快捷键(分享)
2017/07/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
深入了解Python 变量作用域
2020/07/24 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
校庆标语集锦
2014/06/25 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
放飞理想演讲稿
2014/09/09 职场文书
行风评议整改报告
2014/11/06 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
MySQL分库分表详情
2021/09/25 MySQL