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. 恢复xfs文件系统superblock实验

    1. 创建一个XFS文件系统[root@localhost ~]# mkfs.xfs -f /dev/vdb1meta-data=/dev/vdb1              isize=256    ...

  2. js面试题-数组去重

    今天,在聊天群里看到数组去重的话题,面试者的答案如下: 参考答案如下: 程序员思维,做出如下测试: 未考虑到:1,‘1’是不同的,应该不去重 未考虑到对象 所以,参考答案只能去重基础类型 根据以往看过 ...

  3. 【wepy实战】wepy搭建完整项目

    使用小程序框架wepy,搭建完整实战项目.文章将从项目结构.配置.模块等进行逐步分析和学习. 文章适合小程序开发新手以及有经验的小程序developer,不喜勿喷,不吝赐教! 本文为作者原创,转发请标 ...

  4. SQL与NOSQL

    一:关系型数据库 1.概念: 采用了关系模型来组织数据的数据库.简单讲,关系模型就是二维表格模型.二维表格在              数据库中我们称之为记录,列在数据库中我们成为字段. 2举例: M ...

  5. mysql主从同步详细教程

    1.安装好主数据库和从数据库,这个大家肯定都会,如果不是很明白,可以参考我前面的安装教程. 例子: 假如我需要同步test1.test2数据库 系统:centos7 主库主机:192.168.1.25 ...

  6. ActiveMQ--HelloWorld

    下载windows版本ActiveMQ,apache-activemq-5.15.3\bin\win64\activemq.bat 启动mq,ActiveMQ内置jetty,默认端口8161,默认用户 ...

  7. 安装Elasticsearch5.0 部署Head插件

    部署5.0版本的ES 5.0版本的ES跟之前的版本最大的不同之处就是多了很多环境的校验,比如jdk,max-files等等. 设置内核参数 vi /etc/sysctl.conf # 增加下面的内容 ...

  8. javascript对象属性的命名规则

    JS标识符的命名规则,即变量的命名规则: 标识符只能由字母.数字.下划线和‘$’组成 数字不可以作为标识符的首字符 对象属性的命名规则 通过[]操作符为对象添加属性时,属性名称可以是任何字符串(包括只 ...

  9. @Override 注解compiler1.5和compiler1.6不同

    说到注解问题,@interface 来定义注解类 这个注解出现是在jdk1.5版本出现. jdk1.5只支持@override对类的继承中方法重写的使用,不支持接口实现中方法重写的使用(这种情况下会报 ...

  10. kendo UI 入门

    Kendo UI 是一套前端开发宽假,意为日本的“剑道” 首先到官方网站下载最新的30天试用版,地址为:http://www.telerik.com/download/kendo-ui 需要简单注册一 ...