原生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日期时间与时间戳的转换函数分享
Jan 31 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
BootStrap 导航条实例代码
May 18 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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新手上路(八)
2006/10/09 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python数组过滤实现方法
2015/07/27 Python
Python 私有函数的实例详解
2017/09/11 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python实现批量修改文件名
2020/03/23 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
2014年度个人工作总结
2014/11/07 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs