浅谈JavaScript_DOM学习篇_图片切换小案例


Posted in Javascript onMarch 19, 2019

今天开始学习DOM操作,下面写一个小案例来巩固下知识点.

DOM: document object model (文档对象模型)

根据id获取页面元素 : 如: var xx = document.getElementById("id");

根据标签获取元素: 如: var xx = document.getElementsByTagName("div");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #outer {
      width: 500px;
      /*设置上边距50px 水平居中*/
      margin: 50px auto;
      /*设置边框*/
      padding: 10px;
      background-color: greenyellow;
      /*设置文本居中*/
      text-align: center;
    }

    img {
      width: 500px;
    }
  </style>


  <script>

 //btn 为按钮id  clickEventFunction 为点击后执行的操作函数
    function addClick(btn, clickEventFunction) {
      var myButton = document.getElementById(btn);
      myButton.onclick = clickEventFunction;
    };

    window.onload = function () {
      (function () {
        var pics = ["imgs/1.png",
          "imgs/2.png",
          "imgs/3.png"];
        var index = 0;
        showPicNum(index);
        var img = document.getElementsByTagName("img")[0];

        // var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        addClick("btn1", function () {
          index--;
          if (index <= -1) {
            index = pics.length - 1;
          }
          console.log(index + " ----- ");
          img.src = pics[index];
          showPicNum(index);
        });
        addClick("btn2", function () {
          index++;
          if (index >= pics.length) {
            index = 0;
          }
          console.log(index + " ++++++++ ");
          img.src = pics[index];
          showPicNum(index);
        });

        //
        // btn1.onclick = function () {
        //   index --;
        //   if(index <= -1){
        //     index = pics.length - 1;
        //   }
        //   console.log(index + " ----- ");
        //   img.src = pics[index];
        //   showPicNum(index);
        // };
        // btn2.onclick = function () {
        //   index ++;
        //   if(index >= pics.length){
        //     index = 0;
        //   }
        //   console.log(index + " ++++++++ ");
        //   img.src = pics[index];
        //   showPicNum(index);
        // };
        console.log(index);

        /**
         * 展示当前图片为第几张
         * @param index  当前图片索引
         */
        function showPicNum(index) {
          var descrs = document.getElementById("discs");
          descrs.innerText = "一共" + pics.length + "张图片,当前第" + ++index + "张";
        }
      }())
    };
  </script>
</head>
<body>
<div id="outer">
  <p id="discs"></p>
  <img src="imgs/1.png"/><br>
  <button id="btn1" type="button" value="上一张">上一张</button>
  <button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>

文档目录:

浅谈JavaScript_DOM学习篇_图片切换小案例

效果如下:

浅谈JavaScript_DOM学习篇_图片切换小案例

以上所述是小编给大家介绍的JavaScriptDOM图片切换小案例详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JS的反射问题
Apr 07 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
AngularJS实现路由实例
Feb 12 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue多层嵌套路由实例分析
Mar 19 #Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 #Javascript
express.js中间件说明详解
Mar 19 #Javascript
js array数组对象操作方法汇总
Mar 18 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP中GET变量的使用
2006/10/09 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
解决python报错MemoryError的问题
2018/06/26 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python默认参数调用方法解析
2020/02/09 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
自主实习接收函
2014/01/13 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
师德师风自查材料
2014/10/14 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python