原生javascript实现图片轮播效果代码
更新时间：2010年09月03日 21:09:42 作者：
前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。
看到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
【原理简述】
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了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法，以飨观众!2009-09-09
本文将详细介绍Canvas + JavaScript 制作图片粒子效果的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
今天小编就为大家分享一篇关于js中null与空字符串""的区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了微信小程序如何实现radio单选框单击打勾和取消,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
今天一朋友问我 点击一按钮弹出一个DIV，然后要求点击页面其它地方隐藏这个DIV2012-07-07
这篇文章主要介绍了ECMA5数组的新增方法有哪些及forEach（）模仿实现,需要的朋友可以参考下2015-11-11
Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。这篇文章主要介绍了underscore源码分析相关知识，感兴趣的朋友一起学习吧2015-12-12
Angular组件拿不到@Input输入属性问题探究解决方法
最近在工作中实现一个feature的时候，碰到一个小问题：Angular组件拿不到@Input输入属性的问题，尽管对这些问题都比较了解，但是找问题是需要一个过程的，所以还是把这个问题总结记录了下2023-01-01
最近项目中用到了uview 在做表单时用到了校验,发现校验不友好的结果,下面这篇文章主要给大家介绍了关于uniapp插件uview下表单无法动态校验的问题解决,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了浅谈一种让小程序支持JSX语法的新思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论