探索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"> < ...
随机推荐
- tomcat部署https
在server.xml配置文件中增加证书位置跟密码: <Connector port="443" protocol="org.apache.coyote.http1 ...
- SVN merge的主干,分支的相互合并操作
本文只研究了 在本地如何进行主干,分支的相互合并 的操作:从主干到分支,从分支到主干. 本地客户端工具是tortoisesvn 测试用例. 1.本地添加test文件夹 在test文件夹下分别建立tru ...
- js页面刷新之实现框架内外刷新(整体、局部)
这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷新, 框架外部页面的按钮可以实现整页刷新. 代码如下(两个html页面): <!--主界面index ...
- zigbee学习之路(三):按键的控制
一.前言 通过前一次的实验,相信大家都已经对cc2530程序的编写有了一定的认识,这次我们来操作和实验的是cc2530上的按键模块. 二.原理分析 我们先来看一下按键的原理图: 根据原理图我们可以得出 ...
- Linux WordPress博客的安装
1:新建文件夹
- 2016年12月17日 星期六 --出埃及记 Exodus 21:12
2016年12月17日 星期六 --出埃及记 Exodus 21:12 "Anyone who strikes a man and kills him shall surely be put ...
- Flowplayer-playlist
SOURCE URL: https://flowplayer.org/docs/playlist.html HTML layout Here is a typical setup for a play ...
- C# Global Application_Error不执行
今天在开发过程中遇到一个很奇特的问题,就是 Global 文件中的Application_Error 方法不执行的问题,很是苦恼,查了有关这方面的问题,感觉网友们回答的都有点乱,有些人说 在编译时不需 ...
- Kanzi入门
1.安装Kanzi. 2.使用Kanzi studio创建工程. Kanzi创建的工程会包含以下目录结构: 其中, Tool_project文件夹中存放的是设计师设计的工程,包含kanzi UI的工程 ...
- PHP 可变长度参数列表
In PHP 5.6 and later, argument lists may include the ... token to denote that the function accepts a ...