浅谈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 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
Webpack中雪碧图插件使用详解
May 25 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
详解小程序云开发数据库
May 20 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
jquery简单体验
2007/01/10 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
Python类的用法实例浅析
2015/05/27 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
公务员检讨书
2014/11/01 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书