原生javascript实现图片轮播效果代码

前几天用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

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2016-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

25990
来自专栏一“技”之长

Bootstrap响应式前端框架笔记三——代码与表格

    在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下:

12630
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb18-jquery学习笔记(Java全栈开发)

jquery一.筛选 筛选与之前的选择器雷同,筛选提供的都是函数. 1. 过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始...

33990
来自专栏郭少华

(第一季)Vue2.0-内部指令

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

12730
来自专栏老马寒门IT

02-Vue入门之数据绑定

2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,...

28360
来自专栏hightopo

原 基于 HTML5 Canvas 的 3

16750
来自专栏用户2442861的专栏

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

14310
来自专栏HT

基于 HTML5 Canvas 的 3D 碰撞检测

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

24750
来自专栏javascript趣味编程

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

8020
来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

6K00

扫码关注云+社区

领取腾讯云代金券