探索javascript----我对渐变轮播图的理解
对于一个没有编程基础的人来说,我时常希望能有人告诉我,当我们看到一个效果的时候,该怎样有条理地分析出它的行为,而我自己有必要加强这方面的 自省,对于一个轮播图我是这样看的,自动播放必然带有一个定时器,而播放某帧(若假设为渐变为实),渐变就必然也有一个定时器。
1:人通过鼠标控制一个轮播的自动播放autoPlay。
a.当鼠标移入轮播图范围的时候,轮播图停止自动播放,反之开始自动播放:
oBox.onmouseover=function(){
clearInterval(play);
}
oBox.onmouseout=function(){
autoPlay();
}
b.当鼠标移到某按钮时,就播放该帧:(这里是这样思考的:必然按钮和图之间有一种联系来互相控制,它就是参数)
for(var i=0;i<aNum.length;i++){
aNum[i].index=i;//为每一个按钮添加一个“号码牌”属性;
show(this.index)
}
2:自动播放控制着每帧的播放show():
function autoPlay(){
play=setInterval(
index++;
index>=aNum.length && (index=0);//当播放到最后一帧,2秒后又++变为第aNum.length帧(空),就让它重头播放
show(index);
},2000)
autoPlay();
3:每帧的播放show(),每一次都先让所有帧都透明度变为0,也标记特定按钮,然后让特定帧实度渐增至opacity=1;
function show(a){ //需要播放来自自动播放产生的、鼠标移至按钮产生的特定帧,靠参数控制
for(var i=0;i<aLi.length;i++) aLi[i].style.opacity="";//未做兼容
for(var i=0;i<aNum.length;i++){
aNum[i].className="";
}
aNum[a].className="current";
var alpha=0;//最好在函数头声明
timer=setInterval(function(){
alpha++2;
alpha>100 && (alpha=100);
aLi[a].style.opacity =""+alpha/100;
alpha==100 && clearInterval(timer);
},20)
}
探索javascript----我对渐变轮播图的理解的更多相关文章
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 浅谈轮播图(原生JavaScript实现)
现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...
- javascript效果:手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- Microsoft JScript提示‘DIRECT’未定义(2014-08-26记)
当启动Applet的时候,页面弹出:DIRECT’未定义可能的问题是:java控制面板的网络设置问题,可能使用了代理解决: 打开java控制面板--->网络设置-->直接连接-->确 ...
- Postgresql 帐号密码修改方法
1.Linux环境下 #su postgres -bash-3.2$psql -U postgres postgres=#alter user postgres with password 'new ...
- MVC 强类型ViewData[] TempData[]
一.ViewData[] //赋值 ViewData["u"]="值"; //取值 数据类型 u= ViewData["u"] as 数据类 ...
- Duilib实现QQ聊天窗口晃动
转载:http://blog.csdn.net/arbboter/article/details/26282717 转载:http://blog.csdn.net/zerolusta/article/ ...
- 统计单词个数及词频(C++实现)
#include<iostream> #include<fstream> #include<string> using namespace std; struct ...
- 1. Swift基本变量|运算符|控制流
Swift基于cocoa Touch框架,苹果官方为了保证Swift的可靠性,结合多种语言的特性,同时独立了一套属于自己的单独语言,结合了C,C++,OC,Java等语言. 基本变量: 1 . swi ...
- EasyUI关于 numberbox,combobox,validatebox 的几个小问题
在最近的项目中,首次使用到了 网页的一个布局框架——EasyUI,感觉这个框架特别牛,兼容性很不错,页面效果也挺不错,可是在使用标题上三个控件过程中遇到几个很奇特的问题,让我头疼不已,所以在此给广大I ...
- 学习c++
慢慢的滑向无边无际的没有回头路的程序猿道路.坚持就是胜利. 致渣渣
- MFC编程入门之七(对话框:为对话框添加控件)
创建对话框资源需要创建对话框模板.修改对话框属性.为对话框添加各种控件等步骤,前面一讲中已经讲了创建对话框模板和修改对话框属性,本节继续讲如何为对话框添加控件. 上一节中创建了一个名为"A ...
- 生物信息大数据&数据库(NCBI、EBI、UCSC、TCGA)
想系统的学习生信数据库可以先看一下北大的公开课,有一章专门讲的数据库与软件: -生物信息学:导论与方法 北大\ 生物信息数据库及软件资源 一个优秀的生信开发者能够解决如下问题: 如何鉴定一个重要的且没 ...