浅谈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 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
javascript中数组方法汇总
Jul 07 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
微信小程序云开发实现增删改查功能
May 17 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue实现简单计算商品价格
Sep 14 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
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
2014过年倒计时示例
2014/01/31 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Vue.js添加组件操作示例
2018/06/13 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
python二分法实现实例
2013/11/21 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
使用python绘制常用的图表
2016/08/27 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python实现自动解数独小程序
2019/01/21 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
澳大利亚网上书店:QBD
2021/01/09 全球购物
授权委托书样本
2014/04/03 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
投标承诺函范文
2015/01/21 职场文书
商场收银员岗位职责
2015/04/07 职场文书
地道战观后感2000字
2015/06/04 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL