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. python操作mongodb实例

    安装pymongo扩展 import pymongo; client = pymongo.MongoClient(host='10.48.176.170',port=27017); db = clie ...

  2. centOS7 下安装smb服务器

    转载自:http://www.cnblogs.com/lgh344902118/p/7503620.html centOS7和windows10 samba是一款可以让linux和windows下共享 ...

  3. Android之系统Action大全

    String ADD_SHORTCUT_ACTION 动作:在系统中添加一个快捷方式.. “android.intent.action.ADD_SHORTCUT” String ALL_APPS_AC ...

  4. 克隆linux虚拟机

    背景:有时候,我们在用虚拟机的时候会用到多个进行使用.重新安装会花费大量的时间,此时,我们可以通过vmware虚拟机自带的功能快速克隆出完全相同的系统. 前提:被克隆的虚拟机系统要处于关闭状态 步骤: ...

  5. Concurrent包工具类使用

    一.读写锁 传统的同步锁就是独占式锁,当线程使用资源时候保持独占,无论读写.当人们发现请求队列(假设)中相邻请求为读-读的时候,阻塞是一种浪费资源的操作.比如公告板,所有路过的人(请求)都是读操作,并 ...

  6. css 三角图标

    .triangle-right{ display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; bord ...

  7. CSS中的BFC详解

    引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...

  8. POJ 1183

    #include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...

  9. linux下安装mysql-5.7.20

    1.下载地址 https://downloads.mysql.com/archives/community/ 2.安装步骤 解压: groupadd mysql useradd -r -g mysql ...

  10. SQL中文转拼音

    使用下方的函数.. 忘了从哪抄的了..留存一份 如果只要首字母..建议将数据  Left(tableFiled,1) 后传入函数 如果字段是空或者null, 不会报错..返回空 方法体: SET AN ...