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

不说废话了，直接上代码

 <!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. Redis服务器搭建

    下载并解压redis,然后进入redis所在目录   编译安装             make && make install   启动redis 服务 (加上&表示在后台运 ...

  2. [转]支持向量机SVM总结

    首先,对于支持向量机(SVM)的简单总结: 1. Maximum Margin Classifier 2. Lagrange Duality 3. Support Vector 4. Kernel 5 ...

  3. struts2.5框架使用通配符指定方法（常见错误）

    在学习struts框架时经常会使用到通配符调用方法,如下: <package name="shop" namespace="/" extends=&quo ...

  4. Linux 搭建Zookeeper集群

    1.使用root创建zookeeper用户:     useradd zookeeper:     passwd  zookeeper; 2.登录zookeeper用户,将下载的zookeeper-3 ...

  5. 一道面试题引发的对javascript类型转换的思考

    最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...

  6. PHP解耦的三重境界（浅谈服务容器）

    阅读本文之前你需要掌握:PHP语法,面向对象 在完成整个软件项目开发的过程中,有时需要多人合作,有时也可以自己独立完成,不管是哪一种,随着代码量上升,写着写着就"失控"了,渐渐&q ...

  7. android sdk 深入理解adb

    adb 服务器-客户端程序包括3部分 1.客户端(client) 在开发机器上运行,可通过adb命令行呼叫客户端,ADT插件和DDMS同样需要adb客户端   2.服务端(server) 在开发机器上 ...

  8. effective C++ Item 33 避免隐藏继承而来的名字

    1. 普通作用域中的隐藏 名字实际上和继承没有关系.有关系的是作用域.我们都知道像下面的代码: int x; // global variable void someFunc() { double x ...

  9. OAuth2.0 知多少

    1. 引言 周末逛简书,看了一篇写的极好的文章,点击大红心点赞,就直接给我跳转到登录界面了,原来点赞是需要登录的. 可是没有我并没有简书账号,一直使用的QQ的集成登录.下面有一排社交登录按钮,我们可以 ...

  10. IPhone 、Webkit手机浏览器Div滚动、滑动卡，遮罩层被穿透的解决办法

    在滚动条的层上面加上-webkit-overflow-scrolling:touch;样式即可解决!