原生javascript实现图片轮播效果代码
时间:2022-05-04
本文章向大家介绍原生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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ApiBoot v2.3.x分支第一个版本发布,重构源码架构设计
- Python全栈(七)Flask框架之1.Flask简介与URL和视图介绍
- 两个CSS知识点:BFC和选择器权重
- C语言入门系列之9.预处理
- Python爬虫常见异常及解决办法
- 理解nodejs中js和c++的通信原理
- 如何使用FFmpeg将互联网直播点播平台内直播视频流转化为HLS流?
- 记一次nodejs问题排查
- 使用Go语言编译互联网视频直播点播平台EasyDSS出现ld returned 1 exit status错误
- c/c++补完计划(四): 字节对齐和虚继承
- Python 不用selenium 带你高效爬取京东商品评论
- 《闲扯Redis六》Redis五种数据类型之Hash型
- rocketmq学习2
- Python全栈(八)Flask项目实战之1.项目搭建
- 一起来读开源项目的代码-Agar.io为例