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. webpack 4 入坑及爬坑记录

    一.安装 在本机安装好nodejs的基础上,window操作系统,cmd打开控制台,添加到创建的文件夹下 npm init //初始化npm npm install webpack --save-de ...

  2. Python 去除列表中重复的元素

    Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...

  3. zookeeper集群环境搭建详细图文教程

    zookeeper集群环境搭建详细图文教程 zhoubang @ 2018-01-02 [文档大纲] 友情介绍 软件环境 注意点 环境安装 1. 新建用于存储安装包以及软件安装的目录 2. 下载安装z ...

  4. pythonweb框架Flask学习笔记02-一个简单的小程序

    #-*- coding:utf-8 -*- #导入了Flask类 这个类的实例将会是我们的WSGI应用程序 from flask import Flask #创建一个Flask类的实例 第一个参数是应 ...

  5. P1631 序列合并

    P1631 序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2N2个和,求这N^2N2个和中最小的N个. 对于100%的数据中,满足1<=N<=100000. ...

  6. POJ 1247

    #include<iostream> using namespace std; int main(){ ,sum=; int * guest; do{ sum=; sam_num=; ci ...

  7. 大数据技术之_19_Spark学习_04_Spark Streaming 应用解析小结

    ========== Spark Streaming 是什么 ==========1.SPark Streaming 是 Spark 中一个组件,基于 Spark Core 进行构建,用于对流式进行处 ...

  8. 第7章—SpringMVC高级技术—处理multipart形式的数据

    处理multipart形式的数据 MultipartResolver 用于处理文件上传,当收到请求时 DispatcherServlet 的 checkMultipart() 方法会调用 Multip ...

  9. webbench的安装

    1.下载webbench包: 2.下载完毕后,在linux中安装   root@jack-desktop:~/software# tar xvzf webbench-1.5.tar.gz   root ...

  10. a标签发送邮件

    <a href="Mailto:292808135@qq.com?CC=292808135@qq.com&Subject=反馈&Body=花式求喷~%0A您的不满就是我 ...