刚刚学会，写了一个轮播图效果，不过bug蛮多，请高手指点一下，谢谢

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>电影轮播图</title>
  6. <style type="text/css">
  7. *{margin:0;padding: 0;list-style: none;}
  8. body{}
  9. #container{width:1000px;height:409px;position:relative;margin:20px auto;overflow: hidden;}
  10. #list{width:5000px;height:409px;position:absolute;z-index: 1}
  11. #list img{float:left;display: block;}
  12. #pre{background-image:urlhttp://www.w3cfuns.com/data/attachment/album/201411/17/153459b7h8s70shfr2hwrd.png);width:45px;height:45px;float:left;position:absolute;top:190px;left:10px;cursor:pointer;display:none;z-index: 2;}
  13. #next{background-image: url(http://www.w3cfuns.com/data/attachment/album/201411/17/153459g52888zwz1wa11tm.png);width:45px;height:45px;float: left;position:absolute;top:190px;right:10px;cursor:pointer;display:none;z-index: 2;}
  14. #container:hover #pre,#container:hover #next{display: block;}
  15. #pre:hover,#next:hover{background-color: rgba(0,0,0,0.7);   }
  16. #dot{width:1000px;height:10px;position:absolute;bottom:15px;left:450px;z-index: 10;}
  17. #dot span{width:10px;height:10px;display:block;border-radius:10px;background-color: #fff;margin:0 5px;float: left;cursor:pointer;}
  18. #dot .on{background-color: #69aaec;}
  19. </style>
  20. <script type="text/javascript">
  21. window.onload = function(){
  22. var container = document.getElementById('container');//定义container，获取container id；
  23. var list = document.getElementById('list');//定义list，获取list id；
  24. var dot = document.getElementById('dot').getElementsByTagName('span');//定义dot ，获取dot id；
  25. var pre = document.getElementById('pre');//定义 pre（上一张），获取pre id；
  26. var next = document.getElementById('next');//定义next(下一张)，获取next id;
  27. var index = 1;//定义index初始值
  28. var animated = false;
  29. function showDot(){//遍历圆点的滚动状态
  30. for(var i = 0;i < dot.length;i++){
  31. if(dot[i].className == 'on')//判断圆点的className是否为'on'的状态，
  32. {
  33. dot[i].className = '';//如果是的话，就显示初始值;
  34. break;//显示初始值之后跳出函数；
  35. }
  36. }
  37. dot[index - 1].className = 'on';//因为数组第一个从0开始
  38. }
  39. function animate(offset){//定义animated（offset）函数
  40. animated = true;
  41. var newLeft = parseInt(list.style.left) + offset  //定义一个newLeft 变量，赋值parseInt(list.style.left) + offset;
  42. var time = 500;//位移时间；
  43. var interval = 10;//位移间隔时间
  44. var speed = offset/(time/interval);//每次位移的距离；
  45. function go(){
  46. if( (speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
  47. list.style.left = parseInt(list.style.left) + speed + 'px';
  48. setTimeout(go,interval);
  49. }
  50. else{
  51. animated = false;
  52. list.style.left = newLeft   +'px';//list.style.left的使用parseInt转换为数字
  53. if(newLeft > 0 ){//判断left是否大于初始位置，如果大于返回最小值
  54. list.style.left = -4000 + 'px';
  55. }
  56. if(newLeft < -4000){//判断left是否小于最小值，如果小于返回初始值
  57. list.style.left = 0 + 'px';
  58. }
  59. }
  60. }
  61. go();
  62. }
  63. next.onclick = function(){
  64. if(index == 5){//判断index圆点的状态，如果等于最大值，那下一次就会回到最小值
  65. index =1;
  66. }else{//否则就按正常步骤，显示index+1；
  67. index += 1;
  68. }
  69. showDot();//调用函数showDot()，显示className='on';
  70. if(!animated){
  71. animate(-1000);//调用function animate（offset）函数，进行-1000操作，显示下一张图片
  72. }
  73. }
  74. pre.onclick = function(){
  75. if(index == 1){//判断index圆点的状态，如果等于最小值，那下一次就会回到最大值
  76. index =5;
  77. }else{//否则就按正常步骤，显示index-1；
  78. index -= 1;
  79. }
  80. showDot();//调用函数showDot()，显示className='on';
  81. if(!animated){
  82. animate(+1000);//调用function animate（offset）函数，进行+1000操作，显示上一张图片
  83. }
  84. }
  85. for(var i = 0;i < dot.length; i++){// 遍历dot长度
  86. dot[i].onclick = function(){//圆点单击时间函数
  87. if(this.className == 'on'){//判断该圆点是否已经被选中，如选中就返回，不执行之后的函数
  88. return;
  89. }
  90. var myIndex = parseInt(this.getAttribute('index'));//定义myIndex函数目标index（圆点）
  91. var offset = -1000 * (myIndex - index); //计算目标偏移的坐标    计算方式（目标index（myIndex） - 原index ）* -1000
  92. if(!animated){
  93. animate(offset);//调用animated（offset）函数执行偏移的坐标值
  94. }
  95. index = myIndex;//将index函数返回为最新的myIndex数值
  96. showDot();//调用shouDot函数
  97. }
  98. }
  99. var timer = setInterval(next.onclick,3000) //自动切换时间设置 调用setInterval()函数，参数为：next.onclick,时间为3000
  100. container.onmouseover = function(){//当鼠标悬在container容器上时，调用clearInterval，清除timer；
  101. clearInterval(timer);
  102. }
  103. container.onmouseout = function(){//当鼠标移出container容器时，开始执行setInterval函数
  104. timer = setInterval(next.onclick,3000);//调用setInterval()函数，参数为：next.onclick,时间为3000
  105. }
  106. }
  107. </script>
  108. </head>
  109. <body>
  110. <div id="container">
  111. <div id="pre"></div>
  112. <div id="next"></div>
  113. <div id="list" style="left:0px;">
  114. <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153455iy401r4bm04456lr.jpg"></a>
  115. <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153458yjegky9j4bigrkfy.jpg"></a>
  116. <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153457zj2mtzcs40jtt2jt.jpg"></a>
  117. <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153457t8loc5d5loylc6cg.jpg"></a>
  118. <a href="#"><img src="http://www.w3cfuns.com/data/attachment/album/201411/17/153456zetzcexkk0npknnn.jpg"></a>
  119. </div>
  120. <div id="dot">
  121. <span index="1"class="on"></span>
  122. <span index="2"></span>
  123. <span index="3"></span>
  124. <span index="4"></span>
  125. <span index="5"></span>
  126. </div>
  127. </div>
  128. </body>
  129. </html>

复制代码

演示地址：HTTP://WWW.W3CFUNS.COM/BLOG-5441648-5402124.HTML

原生javascript焦点轮播图的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  5. 原生JavaScript实现轮播图

    ---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...

  6. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  7. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  8. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  9. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

随机推荐

  1. Umbraco官方技术文档 中文翻译

    Umbraco 官方技术文档中文翻译 http://blog.csdn.net/u014183619/article/details/51919973 http://www.cnblogs.com/m ...

  2. UVaLive 7375 Hilbert Sort (递归，四分图，模拟)

    题意:告诉你一条希尔伯特曲线的大小,然后给你n 个人,及n 个人的坐标,你的起点是左下角,终点是右下角,按照希尔伯特的曲线去走,按照这个顺序给n个人排序, 按顺序输出每个人的名字! 析:这就是一个四分 ...

  3. POJ 3672 Long Distance Racing (模拟)

    题意:给定一串字符,u表示是上坡,d表示下坡,f表示平坦的,每个有不同的花费时间,问你从开始走,最远能走到. 析:直接模拟就好了,没什么可说的,就是记下时间时要记双倍的,因为要返回来的. 代码如下: ...

  4. wikioi 3116 高精度练习之加法

    题目描述 Description 给出两个正整数A和B,计算A+B的值.保证A和B的位数不超过500位. 输入描述 Input Description 读入两个用空格隔开的正整数 输出描述 Outpu ...

  5. C#中动态加载和卸载DLL

    在C++中加载和卸载DLL是一件很容易的事,LoadLibrary和FreeLibrary让你能够轻易的在程序中加载DLL,然后在任何地方卸载.在C#中我们也能使用Assembly.LoadFile实 ...

  6. 教你50招提升ASP.NET性能（二十）：认识你的循环

    (31)Know your loops 招数31: 认识你的循环 for is the fastest way of iterating over a collection, foreach is a ...

  7. TcxDBLookupCombobox 级联时第二级不显示正确内容的处理方法

    在使用两个级联的 TcxDBLookupCombobox 时,会出现这种情况:当第一级的内容变更后,第二级的控件在界面上显示的文本不变化,即使数据集已经通过 Properites.OnChange 事 ...

  8. linux下的shell命令的编写，以及java怎样调用linux的shell命令(java怎样获取linux上的网卡的ip信息)

    程序猿都非常懒,你懂的! 近期在开发中,须要用到server的ip和mac信息.可是server是架设在linux系统上的,对于多网口,在获取ip时就产生了非常大的问题.以下是在windows系统上, ...

  9. 关于学习netty的两个完整服务器客户端范例

    https://github.com/wangyi793797714/IMServer https://github.com/wangyi793797714/IMClient https://gith ...

  10. 【linux设备模型】之platform设备驱动

    一.platform总线.设备和驱动     platform是一种虚拟总线,对应的设备称为platform_device,对应的驱动称为platform_driver. platform_devic ...