1. <script>
  2. window.onload=function ()
  3. {
  4. var oDiv=document.getElementById('play');
  5. var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); // 注意 新写法
  6. var oUl=oDiv.getElementsByTagName('ul')[0];
  7.  
  8. var now=0;
  9.  
  10. for(var i=0;i<aBtn.length;i++)
  11. {
  12. aBtn[i].index=i;
  13. aBtn[i].onclick=function ()
  14. {
  15. now=this.index; // ??? 用now的作用?
  16.  
  17. tab();
  18. };
  19. }
  20.  
  21. function tab()
  22. {
  23. for(var i=0;i<aBtn.length;i++)
  24. {
  25. aBtn[i].className='';
  26. }
  27. aBtn[now].className='active';
  28. startMove(oUl, {top: -150*now});
  29. }
  30.  
  31. function next() // 这个函数的作用? 自动轮播里调用
  32. {
  33. now++;
  34. if(now==aBtn.length) // 这里是不是不影响调用 后面的 tab(); 直到 now==aBtn.length 才生效?
  35. {
  36. now=0;
  37. }
  38.  
  39. tab();
  40. }
  41.  
  42. var timer=setInterval(next, 2000);
  43.  
  44. oDiv.onmouseover=function ()
  45. {
  46. clearInterval(timer);
  47. };
  48.  
  49. oDiv.onmouseout=function ()
  50. {
  51. timer=setInterval(next, 2000);
  52. };
  53. };
  54. </script>

JS学习笔记 - 运动 - 淘宝轮播图的更多相关文章

  1. 原生JavaScript之“淘宝轮播图”

    轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直 ...

  2. jQuery实现淘宝轮播图

    我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...

  3. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  4. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  5. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  6. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

  7. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

随机推荐

  1. 最近学习了一下DeepLearning,发现时NB。

    持续关注,有空放个算法到线上的推荐上.

  2. struts.xml配置action没用,任意href自动跳到主页,在action中print没用?????

    今晚弄了好久都搞不清楚,晕死我了. 上网找也没找到解决办法. 然后看了Build Path.好吧,有几个没用的jar包,remove之.我去,马上正常了,具体原因未知. 总结:删除jar包不代表Bui ...

  3. PreferenceActivity、PreferenceFragment使用

    文件夹 文件夹 前言 PreferenceActivity preferences_scenario_1xml Preference Activity 演示 PreferenceFragment xm ...

  4. 使用DbUtils实现增删改查——ResultSetHandler 接口的实现类

    在上一篇文章中<使用DbUtils实现增删改查>,发现运行runner.query()这行代码时.须要自己去处理查询到的结果集,比較麻烦.这行代码的原型是: public Object q ...

  5. RvmTranslator6.0 - Dassault Systemes 3DXML

    RvmTranslator6.0 - Dassault Systemes 3DXML eryar@163.com 1. Introduction RvmTranslator can translate ...

  6. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  7. 今日 SGU 5.6

    SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...

  8. Jenkins学习总结(3)——Jenkins+Maven+Git搭建持续集成和自动化部署的

    前言 持续集成这个概念已经成为软件开发的主流,可以更频繁的进行测试,尽早发现问题并提示.自动化部署就更不用说了,可以加快部署速度,并可以有效减少人为操作的失误.之前一直没有把这个做起来,最近的新项目正 ...

  9. 洛谷——P2590 [ZJOI2008]树的统计

    https://www.luogu.org/problem/show?pid=2590#sub 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这 ...

  10. 洛谷 P1217 [USACO1.5]回文质数 Prime Palindromes

    P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...