JS学习笔记 - 运动 - 淘宝轮播图
- <script>
- window.onload=function ()
- {
- var oDiv=document.getElementById('play');
- var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); // 注意 新写法
- var oUl=oDiv.getElementsByTagName('ul')[0];
- var now=0;
- for(var i=0;i<aBtn.length;i++)
- {
- aBtn[i].index=i;
- aBtn[i].onclick=function ()
- {
- now=this.index; // ??? 用now的作用?
- tab();
- };
- }
- function tab()
- {
- for(var i=0;i<aBtn.length;i++)
- {
- aBtn[i].className='';
- }
- aBtn[now].className='active';
- startMove(oUl, {top: -150*now});
- }
- function next() // 这个函数的作用? 自动轮播里调用
- {
- now++;
- if(now==aBtn.length) // 这里是不是不影响调用 后面的 tab(); 直到 now==aBtn.length 才生效?
- {
- now=0;
- }
- tab();
- }
- var timer=setInterval(next, 2000);
- oDiv.onmouseover=function ()
- {
- clearInterval(timer);
- };
- oDiv.onmouseout=function ()
- {
- timer=setInterval(next, 2000);
- };
- };
- </script>
JS学习笔记 - 运动 - 淘宝轮播图的更多相关文章
- 原生JavaScript之“淘宝轮播图”
轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...
- jQuery实现淘宝轮播图
我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
随机推荐
- 最近学习了一下DeepLearning,发现时NB。
持续关注,有空放个算法到线上的推荐上.
- struts.xml配置action没用,任意href自动跳到主页,在action中print没用?????
今晚弄了好久都搞不清楚,晕死我了. 上网找也没找到解决办法. 然后看了Build Path.好吧,有几个没用的jar包,remove之.我去,马上正常了,具体原因未知. 总结:删除jar包不代表Bui ...
- PreferenceActivity、PreferenceFragment使用
文件夹 文件夹 前言 PreferenceActivity preferences_scenario_1xml Preference Activity 演示 PreferenceFragment xm ...
- 使用DbUtils实现增删改查——ResultSetHandler 接口的实现类
在上一篇文章中<使用DbUtils实现增删改查>,发现运行runner.query()这行代码时.须要自己去处理查询到的结果集,比較麻烦.这行代码的原型是: public Object q ...
- RvmTranslator6.0 - Dassault Systemes 3DXML
RvmTranslator6.0 - Dassault Systemes 3DXML eryar@163.com 1. Introduction RvmTranslator can translate ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
- 今日 SGU 5.6
SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...
- Jenkins学习总结(3)——Jenkins+Maven+Git搭建持续集成和自动化部署的
前言 持续集成这个概念已经成为软件开发的主流,可以更频繁的进行测试,尽早发现问题并提示.自动化部署就更不用说了,可以加快部署速度,并可以有效减少人为操作的失误.之前一直没有把这个做起来,最近的新项目正 ...
- 洛谷——P2590 [ZJOI2008]树的统计
https://www.luogu.org/problem/show?pid=2590#sub 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这 ...
- 洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes
P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...