1.切换图片例子：

事件（onclick）

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>切换图片</title>

         <style>

             div {

                 border: 1 px solid white;

                 width: 500px;

                 height: 350px;

                 margin: auto;

                 /**文字居中*/

                 text-align: center;

             }

         </style>

     </head>

     <script>

         var i = 1;

         function changeImg() {//两张图片循环播放

             i++;

             document.getElementById("img1").src = "../../img/" + i + ".jpg";

             if (i == 2) {

                 i = 0;

             }

         }

     </script>

     <body>

         <div>

             <input type="button" value="下一张" onclick="changeImg()" />

             <img src="../../img/1.jpg" width="" id="img1" />

         </div>

     </body>

 </html>

结果：

http://127.0.0.1:8020/WEB03_JS/%E6%A1%88%E4%BE%8B%E4%BA%8C%EF%BC%9A%E4%BD%BF%E7%94%A8JS%E5%AE%8C%E6%88%90%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E6%9E%9C/%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87/%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87.html

2.轮播图

技术分析：

获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);    //第二个参数是毫秒
 
 
步骤分析：
 
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
*注意：循环时最后一个图片要重置。
 
 

*注意点：

  • 在body标签内写onload
  • window.setInterval("changeImg()", 3000); //window可以省略不写
  • document.getElementById("img1").src = "../img/" + i + ".jpg";  /**获取图片位置并设置src属性值*/
 
 
代码实现
 
JS部分：
 <script>

             function init() {

                 //书写轮播图片显示的定时操作(3秒)

                 window.setInterval("changeImg()", 3000); //window可以省略不写

             }

             //书写函数

             var i = 0;

             function changeImg() {

                 i++;

                 //获取图片位置并设置src属性值

                 document.getElementById("img1").src = "../img/" + i + ".jpg";

                 if (i == 2) {

                     i = 0;

                 }

             }

         </script>
 
HTML部分：（在指定位置定义 id）
<body onload="init()">
<!--3.轮播图片-->

            <div id="">

                <img src="../img/1.jpg" width="100%" id="img1" /><!--记得加上id-->

                <!--设置id-->

            </div>

【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)的更多相关文章

  1. JavaScript学习——使用JS实现首页轮播图效果

    1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...

  2. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  3. 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析

    这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

  4. celery介绍、架构、快速使用、包结构，celery执行异步、延迟、定时任务，django中使用celery，定时更新首页轮播图效果实现，数据加入redis缓存的坑及解决

    今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...

  5. 用jQuery实现优酷首页轮播图

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  6. 关于用jQuery知识来实现优酷首页轮播图！

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  7. 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存

    1.   课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...

  8. web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车

    web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...

  9. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

随机推荐

  1. Codeforces Round #605 (Div. 3) 题解

    Three Friends Snow Walking Robot Yet Another Broken Keyboard Remove One Element Nearest Opposite Par ...

  2. 关于Dev-C++用户所必须知道的知识

    开启这几个警告选项,才能拥有GCC编译器的较为全面的报错和警告 另外,目前Dev-C早已停止更新(停滞在版本号5.1,内置的GCC为4.9版本),且使用其检测数组变量也挺麻烦的,实在不推荐使用.

  3. 第09组 Beta冲刺（5/5）

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 无 接下来的计划 无 还剩下哪些任务 s 答辩 遇到 ...

  4. css 在一定区域内滚动显示，不修改父级样式

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:图中圈中的部门是滚动的.不修改父级样式 代码: <div class="right-text-bottom"> ...

  5. 五年微软DevOps MVP （也称TFS MVP）

    笔者有幸第五次被微软授予MVP称号,高兴之余,在这里简单的介绍一下MVP的基本情况: 谁是 MVP? Microsoft 最有价值专家 (MVP) 是热情地与社区分享知识的技术专家.他们总是处于&qu ...

  6. python读写符号的含义

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打开可读写文件,若文件 ...

  7. 2019 年 Java 最新面试指南共 80 题，赶快收藏起来吧！

    2019 年 Java 最新面试指南共 80 题,赶快收藏起来吧! http://blog.zh66.club/index.php/archives/116/

  8. mysql的简介和使用

    mysql简介 数据的所有存储,检索,管理和处理实际上是由数据库软件--DBMS(数据库管理系统)完成的 mysql是一种DBMS,即它是一种数据库软件 mysql工具 mysql是一个客户机-服务器 ...

  9. Java8 新特性 Optional 类

    Optional 类的简介   Optional类的是来自谷歌Guava的启发,然后就加入到Java8新特性中去了.Optional类主要就是为子决解价值亿万的错误,空指针异常.   Optional ...

  10. 探索FFmpeg

    Part1 :FFmpeg简介 FFmpeg定义 FFmpeg是一款音视频编解码工具,为开发者提供了大量音视频处理接口. FF指的是"Fast Forward" FFmpeg历史 ...