原生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 globalStorage类代码
Jun 04 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
js canvas实现擦除动画
Jul 16 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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中time()和mktime()方法的区别
2013/09/28 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Javascript模块模式分析
2008/05/16 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python如何给函数库增加日志功能
2020/08/04 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
九华山导游词
2015/02/03 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
常用的Python代码调试工具总结
2021/06/23 Python
redis lua限流算法实现示例
2022/07/15 Redis