今天开始学习DOM操作,下面写一个小案例来巩固下知识点.

DOM: document object model (文档对象模型)

根据id获取页面元素 :　如:　var xx = document.getElementById("id");

根据标签获取元素:　如:　var xx = document.getElementsByTagName("div");

src="imgs/1.png"/><br>    <button id="btn1" type="button" value="
<!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>


　　文档目录:　　　


　　　　　　　　


　　效果如下:


　　　　　　　　


上一张">上一张</button>    <button id="btn2" type="button" value="下一张">下一张</button></div></body></html>


												


											
JavaScript_DOM学习篇_图片切换小案例的更多相关文章
	

    
								
  1. 《Mysql 公司职员学习篇》 第二章 小A的惊喜
		
          第二章 小A的惊喜  ---- 认识数据库 吃完饭后,小Y和小A回到了家里,并打开电脑开始学习Mysql. 小Y:"小A,你平时的Excell文件很多的情况下,怎么样存放Exce ...
    
		
    2. 
						
  2. CSS学习------之简单图片切换
		
    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
    
		
    3. 
						
  3. Android学习笔记 ImageSwitcher图片切换组件的使用
		
    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
    
		
    4. 
						
  4. 原生XMLHTTPResponse，jQuery-Ajax 上传文件；iframe上传图片&预览；图片验证码小案例
		
    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...
    
		
    5. 
						
  5. 《Mysql  公司职员学习篇》 第一章  小A的烦恼
		
    第一章  小A的烦恼 ----- 为什么学习数据库 和 如何选择数据库 小A是某公司的职员,公司数据部的员工,平常的大小工作,完全离不开EXCELL,而最近小A却越来越苦恼,不由的向好朋友小Y吐槽.小 ...
    
		
    6. 
						
  6. python抓取网页图片的小案例
		
    1.分析 ,要抓取的页面的信息以及对应的源码信息 blog.sina.com.cn/s/blog 93dc666c0101b1bj.html 2.代码模块: 导入正则表达的模块 导入url相关的模块  ...
    
		
    7. 
						
  7. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化
		
    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...
    
		
    8. 
						
  8. 图片切换小demo
		
    <body> <div class="body"><img src="bopin/images/bigImg1.jpg" widt ...
    
		
    9. 
						
  9. SQL查询小案例
		
    这是一篇自学MySQL的小案例,下面是部分数据信息:goods表 1.查询cate_name为‘超级本’的商品名称.价格 SELECT `name`, priceFROM goodsWHERE cat ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Sphinx Building Docs in horizon
			
    Building Contributor Documentation This documentation is written by contributors, for contributors.  ...
    
			
    2. 
						
  2. LeetCode 110.平衡二叉树（C++）
			
    给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3,9,20,null,nu ...
    
			
    3. 
						
  3. git 基础教程
			
    git 提交 全部文件 git add .  git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件.注意 -A 选项后面还有一个 ...
    
			
    4. 
						
  4. eclipse中使用自带的git提交项目
			
    1.自带git插件进行配置我们的用户名和密码,即是自己github注册用户.windows--perferences--Team--Git--Configuration 2.eclipse生成SSH2 ...
    
			
    5. 
						
  5. jQuery OCUpload一键上传文件
			
    1 引入相关的js文件 <!--引入OCUpload的js文件,之前需要引入jQuery的js文件 --> <script type="text/javascript&qu ...
    
			
    6. 
						
  6. web.xml文件配置详解以及实例说明
			
    1.web.xml学名叫部署描述符文件,是在Servlet规范中定义的,是web应用的配置文件. 2.部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出 ...
    
			
    7. 
						
  7. EntityFramework报错
			
    解决:未能加载文件或程序集“EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089” 使用 ...
    
			
    8. 
						
  8. 树莓派WLAN连接PC（不通过路由器）
			
    上一篇博文捣鼓了一下树莓派直连线连接PC.吃完午饭心血来潮,树莓派既然能用直连线连接PC,曾经也试过拿PC当作热点,为何不尝试一下用WLAN将树莓派与PC互连呢?果断搞起. 首先,我当前笔记本是用WL ...
    
			
    9. 
						
  9. maven课程 项目管理利器-maven 3-1 maven常用的构建命令
			
    mvn -v 查看mvn版本 mvn compile  编译 mvn test 测试 mvn package 编译,打包(这个命令会在你的项目路径下一个target目录,并且拥有compile命令的功 ...
    
			
    10. 
						
  10. windows 2008 R2-Zabbix server 3.0监控主机的加入
			
    一.关闭windows防火墙或者开通10050和10051端口 (1).关闭防火墙 开始—控制面板—windows防火墙 按照要求关闭防火墙 (2).开通端口 1.开始—管理工具--高级安全windo ...
    
			
    11.