原生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的回调函数应用示例
Feb 20 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jquery获取radio值实例
Oct 16 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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 print类函数使用总结
2010/06/25 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue中使用protobuf的过程记录
2018/10/26 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python实现自动登录
2018/09/17 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python extract及contains方法代码实例
2020/09/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
教师推荐信范文
2013/11/24 职场文书
烹调加工管理制度
2014/02/04 职场文书
2016中秋节广告语
2016/01/28 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers