浅谈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 相关文章推荐
popdiv
Jul 14 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
Vue代码分割懒加载的实现方法
Nov 23 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
vue生命周期实例小结
Aug 15 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
validator验证控件使用代码
2010/11/23 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python如何使用unittest测试接口
2018/04/04 Python
python虚拟环境迁移方法
2019/01/03 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
python如何支持并发方法详解
2020/07/25 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
产品质量承诺书
2014/03/27 职场文书
会计求职信
2014/05/29 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
商务英语求职信范文
2015/03/19 职场文书
公司晚会主持词
2019/04/17 职场文书
求职信如何撰写?
2019/05/22 职场文书