本人刚刚接触前端，许多知识还不了解，以前经常到博客园查询自己需要的东西，现在也终于反客为主了。作为新手，所展示的东西也是浅显易懂，希望同是新手的伙伴们共同交流、共同进步，若是成功捕获一位大大，也请您赐教。不知道在这里能否有幸找到一位耐心点的师傅，我未来的师傅啊，快来这里啊~~

不说废话了，直接上代码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             img {

                 border: 5px solid tan;

             }

             span {

                 padding: 5px;

                 border: 1px solid;

                 position: relative;

                 top: -28px;

                 left: 4px;

                 cursor: pointer;

             }

         </style>

     </head>

     <body>

         <img src="../img/pro_01.jpg" id="imgs" />

         <span id="img" onclick="onShow(1)" >1</span>

         <span id="img" onclick="onShow(2)" >2</span>

         <span id="img" onclick="onShow(3)" >3</span>

         <span id="img" onclick="onShow(4)" >4</span>

         <script type="text/javascript">

             function onShow(num) {

                 var img = document.getElementById("imgs");

                 var imgs = document.getElementsByTagName("img")

                 for(var i = 0; i < imgs.length; i++) {

                 }

                 img.src = "../img/pro_0" + num + ".jpg";

             }

             var count = 1;

             setInterval(function() {

                 count++;

                 if(count == 5) {

                     count = 1;

                 }

                 onShow(count);

             }, 3000)

         </script>

     </body>

 </html>

效果图：

span标签应该美化些，但目前本人还没有思路，希望大大们指导！

2017-04-09

JavaScript 简易版 自动轮播 手动轮播 菜鸟交流的更多相关文章

  1. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

  2. 闭关修炼180天--手写持久层框架（mybatis简易版）

    闭关修炼180天--手写持久层框架(mybatis简易版) 抛砖引玉 首先先看一段传统的JDBC编码的代码实现: //传统的JDBC实现 public static void main(String[ ...

  3. 手写简易版RPC框架基于Socket

    什么是RPC框架? RPC就是远程调用过程,实现各个服务间的通信,像调用本地服务一样. RPC有什么优点? - 提高服务的拓展性,解耦.- 开发人员可以针对模块开发,互不影响.- 提升系统的可维护性及 ...

  4. C#基于Mongo的官方驱动手撸一个Super简易版MongoDB-ORM框架

    C#基于Mongo的官方驱动手撸一个简易版MongoDB-ORM框架 如题,在GitHub上找了一圈想找一个MongoDB的的ORM框架,未偿所愿,就去翻了翻官网(https://docs.mongo ...

  5. JavaScript 实现简易版贪吃蛇（Day_13）

    时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript  概述 运用JavaScript  实现简易版<贪吃蛇>.     Html 页面 1 <!DOCTYPE htm ...

  6. 来，我们手写一个简易版的mock.js吧（模拟fetch && Ajax请求）

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  7. Netty核心组件介绍及手写简易版Tomcat

    Netty是什么: 异步事件驱动框架,用于快速开发高i性能服务端和客户端 封装了JDK底层BIO和NIO模型,提供高度可用的API 自带编码解码器解决拆包粘包问题,用户只用关心业务逻辑 精心设计的Re ...

  8. 深入理解Mybatis（第一讲）——手写ORM框架（简易版Mybatis）

    我们来自定义一个持久层框架,也就是Mybatis的简易版. 使用端的搭建 idea中新建maven工程IPersistence_test: 在resources目录下新建sqlMapConfig.xm ...

  9. 手写简易版Promise

    实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了. ...

随机推荐

  1. 【转】Netty系列之Netty并发编程分析

    http://www.infoq.com/cn/articles/netty-concurrent-programming-analysis

  2. 第十九篇 js高级知识---词法分析和AO 链

    上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...

  3. 剑指offer编程题Java实现——面试题12相关题大数的加法、减法、乘法问题的实现

    用字符串或者数组表示大数是一种很简单有效的表示方式.在打印1到最大的n为数的问题上采用的是使用数组表示大数的方式.在相关题实现任意两个整数的加法.减法.乘法的实现中,采用字符串对大数进行表示,不过在具 ...

  4. 简单却又复杂的FizzBuzz面试编程问题

    写这篇文章主要是因为偶然看到一篇关于stackoverflow公司的面经中提到了一个有趣的面试编程问题,如题所述:FizzBuzz问题.原文引用如下: “在一些公平的考验之后,我发现那些因为代码而抓狂 ...

  5. 大型ERP系统在线体验

    ERP简单说明: AIO7构建了基于SOA三层架构的管理软件平台.客户通过网络即可得到ERP服务,不用安装服务器.不用建立数据中心.不用安装软件.无需专业IT支持,任何上网设备就可以使用高性能.功能集 ...

  6. Java原生API操作XML

    使用Java操作XML的开源框架比较多,如著名的Dom4J.JDOM等,但个人认为不管你用那个框架都要对JDK原生的API有所了解才能更得心应手的应用.本篇就来简单了解下原生的XML API. JAV ...

  7. UWP--集合绑定数据

    使用 ObservableCollection   列表控件主要是 ListBox.ListView.GridView 等. 为列表控件绑定数据不再是为 DataContext 属性赋值,应该使用列表 ...

  8. 2017Java技术预备作业1501黄学超

    阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我觉得师生关系应当是亲密无间,课上老师讲解学生配合,课下师生交流启发思考. 你有什么技能(学习,棋类,球类,乐器,艺术,游戏,......)比大多 ...

  9. onchange、onclick、onblur等事件区别

    onblur:控件在失去焦点的时候触发 OnChange:当控件的内容发生改变时触发该事件 OnClick:点击该控件时触发 OnKeyDown:在控件有焦点的情况下,按下键时发生 OnKeyUp:在 ...

  10. 元素类型为 "package" 的内容必须匹配 "(result-types?,interceptors?,default-interceptor-ref?

    该错误为struts.xml内配置文件节点顺序错误. package内的元素节点必须按照以下顺序排放:  result-types         interceptors         defau ...