1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Document</title>
    6. <style type="text/css">
    7. /*重置样式*/
    8. *{margin: 0;padding: 0; list-style: none;}
    9. /*wrap的轮播图和切换按钮样式*/
    10. .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;}
    11. .wrap ul{position: absolute;}
    12. .wrap ul li{height: 170px;}
    13. .wrap ol{position: absolute;right: 10px;bottom: 10px;}
    14. .wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;}
    15. .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;}
    16. </style>
    17. </head>
    18. <body>
    19. <!-- wrap包裹录播的图片以及可点击跳转的按钮 -->
    20. <div class="wrap" id="wrap">
    21. <ul id="pic">
    22. <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
    23. <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
    24. <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
    25. <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
    26. <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    27. </ul>
    28. <ol id="list">
    29. <li class="active">1</li>
    30. <li>2</li>
    31. <li>3</li>
    32. <li>4</li>
    33. </ol>
    34. </div>
    35. <script type="text/javascript">
    36. window.onload=function(){
    37. var wrap=document.getElementById('wrap'),
    38. pic=document.getElementById('pic'),
    39. list=document.getElementById('list').getElementsByTagName('li'),
    40. index=0,
    41. timer=null;
    42. // 定义并调用自动播放函数
    43. if(timer){
    44. clearInterval(timer);
    45. timer=null;
    46. }
    47. timer=setInterval(autoplay,2000);
    48. // 定义图片切换函数
    49. function autoplay(){
    50. index++;
    51. if(index>=list.length){
    52. index=0;
    53. }
    54. changeoptions(index);
    55. }
    56. // 鼠标划过整个容器时停止自动播放
    57. wrap.onmouseover=function(){
    58. clearInterval(timer);
    59. }
    60. // 鼠标离开整个容器时继续播放至下一张
    61. wrap.onmouseout=function(){
    62. timer=setInterval(autoplay,2000);
    63. }
    64. // 遍历所有数字导航实现划过切换至对应的图片
    65. for(var i=0;i<list.length;i++){
    66. list[i].id=i;
    67. list[i].onmouseover=function(){
    68. clearInterval(timer);
    69. changeoptions(this.id);
    70. }
    71. }
    72. function changeoptions(curindex){
    73. for(var j=0;j<list.length;j++){
    74. list[j].className='';
    75. pic.style.top=0;
    76. }
    77. list[curindex].className='active';
    78. pic.style.top=-curindex*170+'px';
    79. index=curindex;
    80. }
    81. }
    82. </script>
    83. </body>
    84. </html>

原生javascript实现图片自动轮播和点击轮播代码的更多相关文章

  1. jquery特效（3）—轮播图①（手动点击轮播）

    写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等,虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退. 下面来 ...

  2. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  3. 原生Javascript实现图片轮播效果

    首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...

  4. jQuery图片轮播（一）轮播实现并封装

      利用面向对象自己动手写了一个封装好的jquery轮播对象,可满足一般需求,需要使用时只需调用此对象的轮播方法即可. demo:https://github.com/zsqosos/shopweb ...

  5. 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  6. 【前端】javascript实现带有子菜单和控件的轮播图slider

    实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...

  7. 点击轮播图片左右button，实现轮播效果

    点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...

  8. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  9. CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播

    效果: 资源已经上传到我的下载里边. http://download.csdn.net/detail/u012995856/9587206 1.复制资源文件到CoreThink项目中 corethin ...

随机推荐

  1. Codeforces450 B. Jzzhu and Sequences (找规律)

    题目链接:https://vjudge.net/problem/CodeForces-450B Jzzhu has invented a kind of sequences, they meet th ...

  2. jvm(1)类加载（一）（加载过程，双亲加载）

    JVM类加载器机制与类加载过程 jvm虚拟机的种类: Hotspot(Oracle)(基本上都是在说这个) J9, JikesRVM(IBM) Zulu, Zing (Azul) Launcher是一 ...

  3. js 保留字符串中的关键字前后两个字符其他内容用省略号显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. CSS3 :nth-child(n)使用注意

    :nth-child(n)    ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n)   ---->选中p元素,且该p元素必须是某个父元素下的第 ...

  5. Ubuntu18.04 Redis主从复制

    1.下载安装redis http://download.redis.io/releases/ 2.建立一个主7060和一个从7061文件 3.在两个文件夹中建立用于存放数据得db文件和存日志得log文 ...

  6. mahout学习

    参考:http://www.360doc.com/content/14/0117/09/1200324_345883534.shtml Precondition: 启动Hadoop集群 bin/hdf ...

  7. tensorflow基础篇-2

    #-*- coding:utf-8 -*- import tensorflow as tf sess=tf.Session() #整流水线单元relu print sess.run(tf.nn.rel ...

  8. python字符串中包含Unicode插入数据库乱码问题 分类： Python 2015-04-28 18:19 342人阅读 评论(0) 收藏

    之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...

  9. 【数组】Search a 2D Matrix

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  10. Linux 搭建Hadoop集群错误锦集

    一.Hadoop集群配置好后,执行start-dfs.sh后报错,一堆permission denied zf sbin $ ./start-dfs.sh Starting namenodes on ...