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

不说废话了，直接上代码

 <!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. 由于java.util.Arrays.asList(...)导致的异常

    前言: Collections.toArray()与Arrays.asList() 是Java API提供的友好的相互转换工具,日常开发中用于列表和数组之间的转换非常方便,但今天测试时,发现一下隐藏的 ...

  2. JS中的作用域链

    在js中数据的声明方式有两种: 1.用var声明,例如:var num = 10: 2.直接声明,例如:num = 10: 两种声明方式在某些情况下是有区别的: var data = 10; func ...

  3. Handlebars模板引擎之进阶

    取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...

  4. Java Web(十三) 使用javamail进行发送邮件，(使用QQ，163，新浪邮箱服务器)

    加油加油. --WH 一.发送邮件的原理 在了解其原理之前,先要知道两个协议,SMTP和POP3 SMTP:Simple Mail Transfer Protocol,即简单邮件传输协议,发送邮件的协 ...

  5. 提高C++编译速度-------pimpl 模式& 桥接模式（转）

    pimpl 模式(Private Implementation),我们常常听到诸如“不要改动你的公有接口”这样的建议,所以我们一般都会修改私有接口,但是这会导致包含该头文件的所有源文件都要重新编译,这 ...

  6. JAVA高级总结

    一.集合框架和泛型 1.集合框架 1) 定义:JAVA API的一部分,用于处理一组长度可变得数据. 2) 和数组的区别: 数组的长度不可变,但是集合框架处理的数据长度可以动态变化. 3) 结构: 接 ...

  7. Java容器源码解析之——ArrayList

    public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess ...

  8. 修改Delphi 10.1.2 edit控件在android的复制、剪切和粘贴样式

    Delphi 10.1.2 edit控件在android默认的复制.剪切和粘贴样式太丑,经悟能-DelphiTeacher的提示,用最简单的代码修改后稍有改观. 默认的样式: 修改后的样式: 修改FM ...

  9. ps-修复

    1-    复制图层 2-    工具栏——套索——多变套索工具——上侧工具栏——羽化(15像素) 选区,防止其他区域被修改        羽化,让修改的边缘柔和化 3-    选项区——编辑——填充 ...

  10. 一步到位分布式开发Zookeeper实现集群管理

    说到分布式开发Zookeeper是必须了解和掌握的,分布式消息服务kafka .hbase 到hadoop等分布式大数据处理都会用到Zookeeper,所以在此将Zookeeper作为基础来讲解. Z ...