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

不说废话了，直接上代码

 <!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. 【webpack】-- 自动刷新

    前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们 ...

  2. Android 增量更新

    title: Android NDK之增量更新 1.增量更新使用到的库bsdiff和bzip2 bsdiff库是一个开源的二进制差分工具,通过对比Apk的二进制,从而进行差分包的生成. bsdiff库 ...

  3. HTML文档及标签介绍

    HTML标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag). HTML标签是由尖括号包含的关键词,比如<html> HTML标签通常是成对出现的,比如<body ...

  4. php实现留言板功能

    这个小小的留言板功能适合班级内或者公司内部之间的讨论,对话和留言,非常的方便,更重要的是无需网络,对于公司管理层来说是非常乐于常见的, 下面是这个留言板的写法: 1 首先是登录页面: <form ...

  5. [HDUOJ1312]Red And Black (经典的DFS)

    Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...

  6. SpringBoot之旅 -- 定时任务两种(Spring Schedule 与 Quartz 整合 )实现

    相关文章 Spring Boot 相关文章目录 前言 最近在项目中使用到定时任务,之前一直都是使用Quartz 来实现,最近看Spring 基础发现其实Spring 提供 Spring Schedul ...

  7. KoaHub平台基于Node.js开发的Koa的连接MongoDB插件代码详情

    koa-mongo MongoDB middleware for koa, support connection pool. koa-mongo koa-mongo is a mongodb midd ...

  8. 2005: [Noi2010]能量采集

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 1831  Solved: 1086[Submit][Statu ...

  9. hibernate从数据库中自动生成

    计应134(实验班) 李佳鸿 DB Brower配置 1.依次选择window-Open Perspective-MyEclipse Explorer

  10. MySQL查询语句的45道练习

              一.设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表(四) ...