原生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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
几种tab切换详解
Feb 03 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php给图片加文字水印
2015/07/31 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
ExtJS 入门
2010/10/29 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JavaScript基础之this详解
2017/06/04 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python set集合类型操作总结
2014/11/07 Python
初步解析Python下的多进程编程
2015/04/28 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python连接mongodb集群方法详解
2020/02/13 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
Java基础面试题
2012/11/02 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Nginx限流和黑名单配置
2022/05/20 Servers