浅谈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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
javascript中正则表达式语法详解
Aug 07 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使用base64加密解密图片示例分享
2014/01/20 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python 控制语句
2011/11/03 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python实现通讯录功能
2018/02/22 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
django使用JWT保存用户登录信息
2020/04/22 Python
如何在django中运行scrapy框架
2020/04/22 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
党员创先争优公开承诺书
2014/03/28 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
保留意见审计报告
2015/06/05 职场文书
婚礼答谢词范文
2015/09/29 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS