浅谈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 面向对象之重载
May 04 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
Javascript继承机制详解
2017/05/30 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python实现结构体代码实例
2020/02/10 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
中学老师的自我评价
2013/11/07 职场文书
教师个人自我评价范文
2014/04/13 职场文书
索赔员岗位职责
2015/02/15 职场文书
大学生村官入党自传
2015/06/26 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python