原生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 相关文章推荐
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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实现阳历阴历互转的方法
2015/10/28 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python操作csv文件实例详解
2017/07/31 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
八项规定整改方案
2014/02/21 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
推荐信怎么写
2014/05/09 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
中小学生学籍证明
2014/10/25 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
安全教育培训心得体会
2016/01/15 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers