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. MySQL(外键变种)

    day58 外键的变种                  a. 用户表和部门表                      用户:        不唯一                1 alex    ...

  2. day 68crm(5) 分页器的进一步优化,以及在stark上使用分页器,,以及,整理代码,以及stark组件search查询

    前情提要: 本节内容 自定制分页器 保存及查询记录 代码整理, stark组件search 查询    一:自定制分页器 page 1:创建类 Pagination  # 自定制分页器 _ _init ...

  3. 【OpenCV3】threshold()函数详解

    threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...

  4. System.Thread.TImer控件——http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml

    http://www.360doc.com/content/11/0812/11/1039473_139824496.shtml

  5. nginx添加认证

    1.检查工具是否安装,如果未安装则使用yum安装 #htpasswd 有以上输出表示已经安装,如果没有按装,使用如下命令安装: #yum -y  install httpd-tools 2.htpas ...

  6. Monkey学习笔记<三>：Monkey脚本编写

    我们都知道Monkey是向手机发送伪随机事件流,但是有时候我们需要实现特定的事件流,这时候我们可以用Monkey脚本来实现. 通过对monkey的API研究发现,我们可以通过-f这个参数来实现monk ...

  7. easyUI datebox 日期空间斜杠格式化。例如将日期空间中显示2017-03-13，改为2017/03/13

    easyUI datebox 日期空间斜杠格式化 将日期空间中显示2017-03-13,改为2017/03/13 //日期控件斜杠格式化 function formatDate(date){ if( ...

  8. Redis数据类型之SDS简单动态字符串

    一,简单的动态字符串 1,Redis自己构建了一种名为简单动态字符串的抽象类型,并将SDS用作Redis的默认字符串表示, 2,在redis的数据库里面,包含字符串值的键值对在底层都是由SDS实现的 ...

  9. 剑指offer三十四之第一个只出现一次的字符

    一.题目 在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置 二.思路 详见代码注释. 三.代码 import java.util. ...

  10. 安卓开发——ListView控件（初始化ListView、列表刷新、长按添加menu）

    前言: ListView——列表,它作为一个非常重要的显示方式,不管是在Web中还是移动平台中,都是一个非常好的.不开或缺的展示信息的工具.在Android中,ListView控件接管了这一重担,在大 ...